平滑垂直滚动-阻止用户滚动

Question

我制作了一个平滑垂直滚动的页面，我想知道你是否可以以某种方式"屏蔽"，这样用户就不能用鼠标或触摸板在页面上滚动了——当他们这样做时，整个想法就停止了。

你可以在我的网页上看到滚动。在此处输入链接描述

到目前为止，我只是隐藏了滚动条，所以他们做不到。我想你可以说我的要求是，你能手动"阻止"滚动吗？

谢谢。

Answer 1

它们是几种解决方案，但没有一种是我认为完美的。最简单的是：

• 将css属性"overflow"设置为hidden（如果在body上，则必须将body和html的高度和宽度设置为100%，并且没有边距/填充边框）。

• 您还可以添加一个listenner来滚动事件，然后使用event.prevendDefault（）.阻止它们

但它们总是不受欢迎的效果，可以在没有鼠标滚动的情况下"滚动"页面（和块）：

• 首先是选择：您的布局在此中断。要尝试它，请从上方选择并向下，然后页面将滚动（使用chrome）。当没有文本和拖放时，这种情况不太可能发生，但一旦发生，你的用户就会丢失，因为没有滚动条
• 其次是CCD_ 1。你可以通过javascript调用，或者浏览器有时会自动调用（href到锚点，输入焦点，"重新加载时滚动内存"）。这是因为风险最大，但对这些风险的控制很少

最后，我发现一个"坏"的解决方案是定期强制元素的scrollTop属性为0。但最有可能的是，您不必到达那里，CSS body { overflow: hidden; height: 100% }就足够了。

Answer 2

你做这件事的方式很好。我认为你不能像取消其他事件（按键、按钮点击等）那样取消滚动事件

将溢出设置为隐藏也是我的做法，因为这会完全停止所有滚动。活动甚至没有在后台进行。

以下代码将阻止使用鼠标滚轮滚动。虽然这与我无关，因为我无论如何都不能使用鼠标滚轮滚动，但它可能会阻止使用触摸板滚动。

只需将其添加到包含的一个js文件中。。。

window.onmousewheel = document.onmousewheel = function(event){
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

下面是一个例子。。。

http://jsfiddle.net/johncmolyneux/aSw2g/