如何在ScrollDown上创建body scrollLeft，反之亦然

Question

I have put together a little code that I had hoped would allow the html to scroll to the left whenever a user scrolls down and scroll right when the user scrolls up

I've put together an example of my code here JSFIDDLE

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

I need to prevent the user from scrolling vertically and want the vertical scrolls to cause horizontal scrolling instead.

Answer 1

First of all, you miss te parenthesis at the end of the preventDefault() call. That's why the vertical scrollbar still works.

Second, there is no such jQuery method as scrollRight() . You should use the scrollLeft() method for both direction.

See your updated fiddle !

Answer 2

The scrollRight method is not defined by jQuery so you have to use scrollLeft.

When you call scrollLeft without any arguments you get the current scroll position (starting from the left edge). When you call scrollLeft(value) you set the current scroll position to value (ref. https://api.jquery.com/scrollleft/ ).

Following snippet works.

 $(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>