2016-11-29 12 views
0

私は特定のセクションで水平スクロールが必要です。そのためには、私はそのjqueryの例を実行して、jQueryを使用しています。スクロールはpage.how全体で動作しています私は特定のセクションのみのスクロールを設定していますか?つまり、スクロールする特定のdivをどのように設定できますか?ここにコードがあります。水平スクロールjqueryはページ全体を処理します

 <!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="css/example.css" /> 
</head> 
<body> 


    <section id="scrolll"> 
    <div class="middle scroll" style="border:solid red;backgroun:red"> 
     <img src="images/middle.png" alt="" /> 
    </div> 



    <script type="text/javascript" src="../libs/jquery.min.js"></script> 
    <script type="text/javascript" src="../src/jquery.jInvertScroll.js"></script> 
    <script type="text/javascript"> 
    (function($) { 
     var scrolll= document.getElementById('scrolll'); 
     var elem = $.jInvertScroll(['.scroll'],  // an array containing the selector(s) for the elements you want to animate 
      { 
      height: 600,     // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height 
      onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page 
       console.log(percent-50); 
      } 
     }); 

     $(window).resize(function() { 
      if ($(window).width() <= 768) { 
      elem.destroy(); 
      } 
      else { 
      elem.reinitialize(); 
      } 
     }); 
    }(jQuery)); 
    </script> 
    </section> 

    <section> 
     <div style="border:solid orange;height:1000px"></div> 
    </section> 

</body> 
</html> 

答えて

0
<div id="scrollDiv" style="overflow:auto;"> 
    // write code here over which scroll will be applied 
</div> 

あなたはdivの内側に置き、スクロールするセクション。そのdivにIDを指定します。 scrollDivを作成し、上記の例に示すようにスタイル属性を配置します。

0

プラグインは必要ありません。ちょうどあなたが

#scrolll{height: 600px; 
 
    overflow-y: scroll;}
<section id="scrolll"> 
 
    <div class="middle scroll" style="border:solid red;backgroun:red"> 
 
     <img src="images/middle.png" alt="" /> 
 
    </div> 
 

 

 
    </section> 
 

 
    <section> 
 
     <div style="border:solid orange;height:1000px"></div> 
 
    </section>

スクロールをしたい高さとオーバーフロー-Yを使用
関連する問題