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

Question

我制作了一个平滑垂直滚动的页面，我想知道你是否能以某种方式“阻止”所以用户无法使用他的鼠标或触摸板在页面上滚动 - 当他们这样做时，整个想法有点儿停止。

您可以在我的网页上看到滚动条。 enter link description here

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

感谢。

Answer 1

你做的方式很好。我不认为您可以取消滚动事件，就像您可以使用其他事件（按键，按钮点击等）。

将溢出设置为隐藏将是我如何做到这一点，因为它完全停止所有滚动。事件甚至不会在后台发生。

以下代码将阻止使用鼠标滚轮滚动。虽然这与我无关，因为我无论如何也无法使用鼠标滚轮进行滚动，但它可能会阻止您使用触控板滚动。

只需将其添加到您添加的js文件之一......

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

这是一个例子......

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

Answer 2

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

• 将css属性“overflow”设置为隐藏（如果在你的身体上，你必须在body和html上设置高度和宽度为100％，加上没有边距/填充边框）。

• 您也可以添加一个侦听器来滚动事件，然后使用event.prevendDefault（）阻止它们。

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

• 首先是选择：你的布局在这里打破。要尝试它，从上面选择并向下，然后页面将滚动（使用铬）。当没有文本而没有拖放时，这种情况不大可能发生，但一旦发生，您的用户就会丢失，因为没有滚动条。
• 第二个是scrollIntoView()。您可以通过javascript调用它，或者浏览器有时会自动执行此操作（href为锚点，输入焦点，“重新加载时滚动内存”）。这是最大的风险，但对这些风险的控制很少。

最后，我找到的一个“坏”解决方案是定期将元素的scrollTop属性强制为0.但很可能你不必去那里，CSS body { overflow: hidden; height: 100% }就足够了。