CSS溢出的滚动问题：滚动HTML答案

【问题标题】：Scrolling issue with CSS overflow: scroll HTMLCSS溢出的滚动问题：滚动HTML
【发布时间】：2012-08-05 16:11:24
【问题描述】：

这里是 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/

【问题讨论】：

就个人而言，这是我喜欢并经常使用的一个功能。没有它会惹恼我的废话。
设置body{overflow: hidden} 将阻止页面滚动。但是，为什么不在页面上设置一个包含的高度，这样就不会溢出来隐藏？
@Joe 我更新了我的问题，因为我希望能够滚动正文。这意味着应该根据鼠标位置涉及某种 JavaScript，从而禁用正文滚动功能。

标签： javascript css scroll overflow

【解决方案1】：

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

（顺便说一句，jQuery 是一个 Javascript 库，可以让编码更轻松快捷：http://jquery.com/）

例子：

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

更新：

要保留滚动条并禁用它们，请遵循以下解决方案：Just disable scroll not hide it?

此处示例：http://jsfiddle.net/BzYcZ/2/

此处更新了 Javascript：

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

额外的 CSS：

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

【讨论】：

实际上我希望能够根据光标所在的位置滚动正文/html
@sensor 我用一个例子更新了我的答案，当你用类yourdivclass悬停div时，它会隐藏html/body的滚动条@
感谢您的回复！我已经尝试过了，但是页面的闪烁真的很糟糕，因为当设置了 overflow:hidden 时，整个页面的滚动条就会消失。
@sensor 我在 SO 的另一个问题中找到了解决方案。
谢谢，伙计！这很好用。我将使用解决方案编辑我的问题！

【解决方案2】：

如果您根本不想滚动正文容器，可以将 overflow:hidden 属性添加到正文，或者您可以使用 jQuery 冻结正文容器滚动条，就像在 Facebook 所做的那样。

【讨论】：