CSS溢出的滚动问题:滚动HTML

Question

这是jsFiddle以便更好地理解:http://jsfiddle.net/BzYcZ/

我有一些有滚动条的div.

我想要的是当我使用鼠标滚动到达div的末尾时停止滚动而不是滚动整个页面.

发生的事情是,当我到达div的末尾时,整个页面开始滚动.

我知道这是浏览器驱动的,但是有一些JS事件可以处理这种情况并阻止滚动整个页面,因为我的光标在这个div元素上.

编辑:

我想能够滚动整个页面,但只有当我的鼠标不在这个div时.

解

.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

这是JavaScript部分:

$('.small_content').hover(
    function () {
        $('body').addClass('noscroll');
    }, 
    function () {
        $('body').removeClass('noscroll');
    }
 );

这里是工作jsFiddle的链接:http://jsfiddle.net/BzYcZ/3/

Answer 1

你可以使用 jQuery 并冻结 body/html 的任何滚动条

\n\n

（顺便说一下，jQuery 是一个 Javascript 库，它使编码变得更容易、更快捷： http: //jquery.com/）

\n\n

例子：

\n\n

$(\'.yourdivclass\').hover(\nfunction () {\n    $(\'html, body\').css("overflow", "hidden");\n},\nfunction () {\n    $(\'html, body\').css("overflow", "auto");\n});\n

\n\n

更新：

\n\n

要保留滚动条并仅禁用它们，请遵循以下解决方案：仅禁用滚动而不隐藏它？

\n\n

示例如下： http: //jsfiddle.net/BzYcZ/2/

\n\n

在这里更新了 JavaScript：

\n\n

$(\'.small_content\').hover(\nfunction () {\n   $(\'body\').addClass(\'noscroll\');\n},\nfunction () {\n    $(\'body\').removeClass(\'noscroll\');\n});\xe2\x80\x8b\n

\n\n

额外的CSS：

\n\n

body.noscroll\n{\n    position: fixed; \n    overflow-y: scroll;\n    width: 100%;\n}\n

\n