Javascript 如何使主体在向下滚动时向左滚动，反之亦然

我已经编写了一个小代码，我希望它能让html在用户向下滚动时向左滚动，在用户向上滚动时向右滚动

我在这里放了一个代码示例

---

我需要阻止用户垂直滚动，并希望垂直滚动导致水平滚动。

首先，您错过了

preventDefault（）

调用末尾的括号。这就是为什么垂直滚动条仍然有效

其次，没有像

scrollRight（）

这样的jQuery方法。两个方向都应该使用

scrollLeft（）

方法

---

查看您的更新

首先，调用

preventDefault（）

的末尾缺少了括号。这就是为什么垂直滚动条仍然有效

其次，没有像

scrollRight（）

这样的jQuery方法。两个方向都应该使用

scrollLeft（）

方法

---

查看您的更新

jQuery没有定义scrollRight方法，因此必须使用scrollLeft

当您在没有任何参数的情况下调用scrollLeft时，您会得到当前的滚动位置（从左边缘开始）。调用scrollLeft（值）时，将当前滚动位置设置为value（ref.）

下面的代码段很有用

$（文档）.ready（函数（）{
变量body=$（'body'）；
$（窗口）.bind（'mousewheel'，函数（e）{
e、 预防默认值（）；
body.scrollLeft（body.scrollLeft（）-e.originalEvent.wheelDelta）；
});
});
部分{
宽度：500vw；
高度：100vh；
/*无关紧要*/
背景：rgba（76,76,76,1）；
背景：-moz线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,1）100%）；
背景：-webkit渐变（左下，右上，颜色停止（0%，rgba（76,76,76,1）），颜色停止（12%，rgba（89,89,89,89,1）），颜色停止（25%，rgba（102102102,1）），颜色停止（39%，rgba（71,71,71,71,1）），颜色停止（50%，rgba（44,44,44,1）），颜色停止（51%，rgba（0,0,0,1）），颜色停止（60%，rgba（17,17,17,1）），颜色停止（76%，rgba（43,43,1）），颜色停止）（91%，rgba（28,28,28,1）），色差（100%，rgba（19,19,19,1））；
背景：webkit线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,1）100%）；
背景：-o-线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,1）100%）；
背景：-ms线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,19,1）100%）；
背景：线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,19,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#4c4c'，endColorstr='#131313'，GradientType=1）；
}
jQuery没有定义scrollRight方法，因此必须使用scrollLeft

当您在没有任何参数的情况下调用scrollLeft时，您会得到当前的滚动位置（从左边缘开始）。当您调用scrollLeft（值）时，您会将当前的滚动位置设置为value（ref.）

下面的代码段很有用


$（文档）.ready（函数（）{
变量body=$（'body'）；
$（窗口）.bind（'mousewheel'，函数（e）{
e、 预防默认值（）；
body.scrollLeft（body.scrollLeft（）-e.originalEvent.wheelDelta）；
});
})；
部分{
宽度：500vw；
高度：100vh；
/*无关紧要*/
背景：rgba（76,76,76,1）；
背景：-moz线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,1）100%）；
背景：-webkit渐变（左下，右上，颜色停止（0%，rgba（76,76,76,1）），颜色停止（12%，rgba（89,89,89,89,1）），颜色停止（25%，rgba（102102102,1）），颜色停止（39%，rgba（71,71,71,71,1）），颜色停止（50%，rgba（44,44,44,1）），颜色停止（51%，rgba（0,0,0,1）），颜色停止（60%，rgba（17,17,17,1）），颜色停止（76%，rgba（43,43,1）），颜色停止）（91%，rgba（28,28,28,1）），色差（100%，rgba（19,19,19,1））；
背景：webkit线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,1）100%）；
背景：-o-线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,1）100%）；
背景：-ms线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,19,1）100%）；
背景：线性梯度（45度，rgba（76,76,76,1）0%，rgba（89,89,89,1）12%，rgba（102102102,1）25%，rgba（71,71,71,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,1）51%，rgba（17,17,1）60%，rgba（43,43,1）76%，rgba（28,28,1）91%，rgba（19,19,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#4c'，
$(document).ready(function() {
    $(window).bind('mousewheel', function(e) {
        e.preventDefault();
        if (e.originalEvent.wheelDelta >= 0) {
            $('html, body').scrollRight(1);
        }
        else {
            $('html, body').scrollLeft(1);
        }
    });
});