Question

我不确定这是否是浏览器问题，但在Webkit浏览器中，我有一个带有以下CSS的div：

.fixed_box {
    position: fixed;
    top: 100px;
    height: 200px;
    width: 200px;
    overflow-y: scroll;
}

当您在该div内滚动并且您点击该div的顶部时，如果有溢出的元素，页面的其余部分也会开始滚动，但我还没有滚动到那里。

我需要设置它，以便当我的鼠标在里面并滚动时只有.fixed_box会滚动。

由于

Answer 1

您可以使用mousewheel和DOMMouseScroll功能来实现此目的。在代码中添加以下jquery。

$('.fixed_box').on('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;

if (e.type == 'mousewheel') {
    scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
    scrollTo = 40 * e.originalEvent.detail;
}

if (scrollTo) {
    e.preventDefault();
    $(this).scrollTop(scrollTo + $(this).scrollTop());
}
});

<强>解释

这里我使用了两种类型的函数，因为在jQuery 1.7+中，jQuery Event对象中没有detail属性。因此，我们需要在DOMMouseScroll事件中使用event.originalEvent.detail来获取此属性。此方法与旧的jQuery版本向后兼容。

进入内部部分，它实际上是获得鼠标滚轮高度的值，这意味着当您使用鼠标向上或向下时，它应该在特定div上下移动多少高度。我正在使用将始终执行的preventDafault函数，以便不会触发此事件的默认操作。因此，我使用底线计算手动上下移动我的滚动。

if条件是使用鼠标滚轮功能检查我们是否获得了值。如果我们没有获得价值，它将是一个＆＃34; null＆＃34;值。因此底部防止默认和定位不起作用。

Have a Fiddle!!

Answer 2

正如评论中所说，用户如何在不滚动的情况下访问内容？这是答案：）

overflow: hidden;身体上。

Have a fiddle

CSS

body { margin:0; padding:0; color:#fff; overflow: hidden; }

#wrapper { background:#000; }
.fixed_box {
    position: fixed;
    top: 100px;
    height: 200px;
    width: 200px;
    overflow-y: scroll;
    background:#f00;
}

CSS限制溢出：滚动到所选元素

2 个答案: