Javascript 有没有可能使网站水平和垂直滚动？

我试图制作一个实验性的叙事网站，在一个页面上讲述两个不同的故事。该网站目前只是水平滚动，我只是有一个大的固定图像顶部有一个大洞在中间。我最初在水平滚动的末尾有一个可点击的图像，这样它可以链接到另一个故事，但我想知道我是否可以有水平滚动和垂直滚动，这样它可以同时显示不同的图像？当用户垂直滚动时，水平滚动停止；当用户水平滚动时，垂直滚动停止？谢谢

---

是的。一种方法是使用

jQuery

捕获

mouseweel

事件来启动自定义滚动功能，同时使用

overflow:hidden

隐藏默认滚动条以避免任何奇怪的行为。因此，它实际上是要创建一个受控环境，在该环境中，更改通过事件句柄而不是本机浏览器“滚动”进行

看看我的基本示例：

//jQuery下一个或第一个/上一个或最后一个插件
$.fn.nextOrFirst=函数（选择器）{
var next=此.next（选择器）；
return（next.length）？next:this.prevAll（selector.last（）；
};
$.fn.prevOrLast=函数（选择器）{
var prev=此.prev（选择器）；
return（prev.length）？prev:this.nextAll（selector.last（）；
};
//滚动功能
函数滚动部分（父级，目录）{
var active=“active”，
节=父级查找（“.”+活动）；
if（dir==“prev”）{
section.removeClass（活动）.prevOrLast（）.addClass（活动）；
}否则{
section.removeClass（活动）.nextOrFirst（）.addClass（活动）；
}
}
//将滚动功能绑定到鼠标滚轮事件
$（“#垂直，#水平”）.on（'mousewheel'，函数（e）{
如果（e.originalEvent.wheelDelta/120>0）{//向上滚动事件
滚动节（$（本），“上一节”）；
}else{//向下滚动事件
滚动部分（$（本））；
}
});
html，主体，#垂直{
颜色：#FFF；边距：0；填充：0；
高度：100%；溢出：隐藏；}
#水平的{
高度：70vh；宽度：70vh；
位置：固定；边距：自动；
顶部：0；左侧：0；右侧：0；底部：0；
显示器：flex；
边界半径：100%；
溢出：隐藏；}
部分{
身高：0%；
框大小：边框框；
过渡：1s；
溢出：隐藏；}
#水平剖面{
宽度：100%；高度：100%；
最小宽度：0%；
文本对齐：居中；}
.内部{padding:3em；}
#垂直截面.活动{高度：100%；}
#水平剖面.活动{最小宽度：100%；}

水平1
水平2
水平3
垂直1
垂直2
垂直3
查找库。您仍然需要学习如何实现它们，但这是一个良好的开端。您的脚本无法在Firefox中运行。但是它穿起来很好看Chrome@Type-样式谢谢，Firefox似乎识别了
wheel
事件，而不是
mouseweel
。相应更新。非常感谢。这太神奇了。