如何在 ScrollDown 上制作 body scrollLeft，反之亦然

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

jQuery 没有定义 scrollRight 方法，所以你必须使用 scrollLeft。

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

以下 sn-p 作品。

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

Answer 2

首先，您错过了preventDefault() 调用末尾的括号。这就是垂直滚动条仍然有效的原因。

其次，没有像scrollRight()这样的jQuery方法。您应该对两个方向使用scrollLeft() 方法。

查看更新后的fiddle！