2017-06-22 3 views
0

Ich versuche, die eine Seite auf dem Mausrad zu scrollen. Wenn Sie mit der Maus nach unten gehen, bewegt sich der untere Abschnitt nach oben und mit der Maus nach oben bewegt sich der obere Abschnitt nach unten. Es gibt fünf Abschnitte und ich benutze Variable 'a' mit Anfangswert als 1, auf mousedown eine Schritte und sendet den Wert als ID des Abschnitts (zB: a = 2, document.getElementbyId(a) sollte den Abschnitt 2 aufrufen). Dies ist das erwartete Ergebnis. ganze Seite blättern basierte basierend auf Mausrad

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<style> 
section { height: 100vh; 
border:1px solid black; } 
.pushupsections{ 
    margin-bottom:-100vh; 
} 
</style> 
</head> 

<body> 
<section id=1>1</section> 
<section id="2">2</section> 
<section id="3">3</section> 
<section id="4">4</section> 
<section id="5">5</section> 
<script> 
$(document).ready(function() { 
var a=1; 
$('body').bind('mousewheel', function(e){ 
// var e; 
    if(e.originalEvent.wheelDelta /120 > 0) { 
     // alert(1); 
     if(a>1){    
     a--; 

     //$(a).addClass("pushupsections"); 
     // document.getElementById(a).addclass("pushupsections"); 
     } 
    } 
    else{   
     if(a<5){ 
     a++; 

      // document.getElementById(a).addclass("pushupsections"); 
      }   
    } 
}); 
}); 
</script> 

</body> 
</html> 

Antwort

-1

können Sie die Breite der Abschnitte festgelegt und die Höhe 100% und ihre Positionen zu fixed gesetzt. Für den Containersatz des Abschnitts overflow: hidden. Hier

ist die Umsetzung: https://jsfiddle.net/f9ug3wv5/

+0

Vielen Dank für die Lösung. Aber der Effekt, den ich suchte, ist wie in www.thepetedesign.com/demos/onepage_scroll_demo.htm – vineeth

0

Sie berücksichtigen sollten fullPage.js stattdessen verwenden. Die vollständigste und beliebteste Bibliothek für diese Art von Effekt.

Verwandte Themen