2016-11-29 3 views
0

Ich arbeite auf einer Website.Ich brauche horizontale Scrolling auf einem bestimmten Abschnitt, dafür verwende ich JinvertScroll jquery.Wenn ich das Beispiel von jQuery laufen das Scrollen funktioniert auf gesamte page.how kann Ich lege das Scrollen nur für einen bestimmten Abschnitt fest. Ich meine, wie kann ich das bestimmte div einstellen, das scrollen soll? Hier ist der Code.horizontal scrollen jquery arbeiten auf der gesamten Seite

 <!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> 

Antwort

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

Der Abschnitt Ihnen Platz es in einem div blättern möchten. Geben Sie dieses div eine ID z.B. scrollDiv und Platzieren Sie ein Stilattribut, wie im obigen Beispiel gezeigt.

0

Sie brauchen kein Plugin dafür. Verwenden Sie einfach Höhe und Überlauf-y, wo Sie eine Scroll

#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>

wollen
Verwandte Themen