Wie Körper scrollleft auf scroll und umgekehrt

Question

ich haben zusammen ein wenig Code zu machen, die ich gehofft hatte, würde die HTML erlauben nach links, wenn ein Benutzer einen Bildlauf nach unten und dann nach rechts, wenn der Benutzer blättert nach oben

blättern

ich habe hier zusammen ein Beispiel meines Code JSFIDDLE setze

$(document).ready(function() { 
    $(window).bind('mousewheel', function(e) { 
     e.preventDefault(); 
     if (e.originalEvent.wheelDelta >= 0) { 
      $('html, body').scrollRight(1); 
     } 
     else { 
      $('html, body').scrollLeft(1); 
     } 
    }); 
}); 

ich brauche vertikal um den Benutzer zu verhindern, Scrollen und will der vertikale Bildlauf anstatt horizontale Scrollen zu verursachen.

Answer 1

Zuerst fehlt Ihnen die Klammer am Ende des preventDefault() Aufrufs. Deshalb funktioniert die vertikale Bildlaufleiste immer noch.

Zweitens gibt es keine solche jQuery-Methode wie scrollRight(). Sie sollten die Methode scrollLeft() für beide Richtungen verwenden.

Sehen Sie Ihre aktualisierte fiddle!

Answer 2

Die scrollRight-Methode wird nicht von jQuery definiert, daher müssen Sie scrollLeft verwenden.

Wenn Sie scrollLeft ohne Argumente aufrufen, erhalten Sie die aktuelle Bildlaufposition (beginnend an der linken Kante). Wenn Sie scrollLeft (Wert) aufrufen, setzen Sie die aktuelle Bildlaufposition auf den Wert (Ref. https://api.jquery.com/scrollleft/).

Folgendes Snippet funktioniert.

$(document).ready(function() { 
 
    var body = $('body'); 
 
    $(window).bind('mousewheel', function(e) { 
 
    e.preventDefault(); 
 
    body.scrollLeft(body.scrollLeft() - e.originalEvent.wheelDelta); 
 
    }); 
 
});

section { 
 
    width: 500vw; 
 
    height: 100vh; 
 
    
 
    /*unimportant */ 
 
    background: rgba(76,76,76,1); 
 
    background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(50%, rgba(44,44,44,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(17,17,17,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1))); 
 
    background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    background: linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section></section>