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

首先，您在preventDefault()电话结束时错过了括号。这就是垂直滚动条仍然有效的原因。

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

查看更新后的fiddle！

Answer 2

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

当您调用不带任何参数的scrollLeft时，您将获得当前滚动位置（从左边缘开始）。当您调用scrollLeft（value）时，将当前滚动位置设置为value（ref。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>

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

2 个答案: