将鼠标拖动到屏幕边缘时防止滚动

Question

当我单击鼠标并将其移动到屏幕边缘时，页面会自动朝那个方向滚动（至少在 Chrome 上是这样）。

例如，如果你去：Google

按住鼠标不放，将光标移至屏幕底部，页面将向下滚动。

我想在我自己的网站上禁用此功能，并防止浏览器自动滚动。这个可以吗？

一开始我以为是文本选择的问题，我试了一下

$("body").disableSelection()

但这不起作用。

Answer 1

您可以使用 CSS 禁用文本选择：

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

• 来源：https://stackoverflow.com/a/4407335/1737158
• 浏览器支持：http://caniuse.com/#feat=user-select-none

但停止拖拽无济于事。

您可以使用window.scrollTo(x, y); 将用户滚动到一个或其他位置。您可以绑定滚动事件Capturing the "scroll down" event? 并检查鼠标位置Javascript - Track mouse position。所以基本上你只需要禁用这种行为。

我刚刚尝试了一些其他有趣的方法 - 用 css 禁用鼠标事件，用 css 禁用选择，用 JS 禁用鼠标事件冒泡。对您的情况没有任何帮助。尝试使用之前写的那些策略。