Question

如果水平滚动结束，我正在尝试实现垂直滚动。

我有2个div一个在另一个下面。第一个包含可以水平滚动的内容。（我已经完成了这部分）现在我被困在如何使它垂直滚动到第二个div正好在下面第1个div的内容结束后的第1个div。

我需要一些指导来实现这一点，任何插件或代码都会有所帮助。我将自己做，我只需要遵循的路径。

    <!DOCTYPE html>
       <html>
      <head>
 <title></title>

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body,html{
        height: 100%;
        width: 100%;
    }
    .div{
        width: 100%;
        height: 100%;

    }
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
    .wrapper{

            overflow-x:hidden;
    }
    .insideWrapper{
        background: black;
        height: 400px;
        width: 3300px;
        overflow-x: visible;
        overflow-x: scroll;
        margin: 135px 0;
        display: flex;
        align-items: center;

        }
       .inside{
          width: 200px;
          height: 200px;
          background-color: rebeccapurple;
          display: inline-block
        }
       .inside:nth-child(2n){
        background-color: mediumseagreen;
        }
         .inside:nth-child(3n+1){
        background-color: yellow;
        }
       .insideWrapper::-webkit-scrollbar {
      width: 0px;
        }

    </style>
    </head>
  <body>


  <div class="wrapper red div">
      <div class=" insideWrapper">
     <div class=" inside"></div>
     <div class=" inside"></div>
      <div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div><div class=" inside"></div>
<div class=" inside"></div>
<div class=" inside"></div>
  <div class=" inside"></div>

   </div>


 </div>

  <div class="green div"></div>
      <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'>   </script>
 <script type='text/javascript'    src='https://cdnjs.cloudflare.com/ajax/libs/jquery-  mousewheel/3.1.13/jquery.mousewheel.js'></script>

 <script type="text/javascript">

   $(document).ready(function(){


      $(".insideWrapper").mousewheel(function(event, delta) {

       this.scrollLeft -= (delta * 30);

     event.preventDefault();

   });

  });




 </script> 
 </body>

如果水平内容结束，则水平滚动比垂直滚动

0 个答案: