javascript - 如何使主体在 ScrollDown 上向左滚动，反之亦然

Question

我编写了一些代码，我希望这些代码可以让 html 在用户向下滚动时向左滚动，在用户向上滚动时向右滚动

我在这里整理了我的代码示例 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);
        }
    });
});

我需要防止用户垂直滚动并希望垂直滚动引起水平滚动。

Answer 1

scrollRight 方法不是由 jQuery 定义的，因此您必须使用scrollLeft。

当您不带任何参数调用scrollLeft 时，您将获得当前滚动位置(从左边缘开始)。当您调用scrollLeft(value)时，您将当前滚动位置设置为value(引用https://api.jquery.com/scrollleft/)。

以下代码片段有效。

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