jquery - CSS 限制溢出 : scroll to selected element

Question

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

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

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

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

谢谢

Answer 1

您可以使用鼠标滚轮和 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+ 中，detail 属性在 jQuery Event 对象中不可用。因此，我们需要在 DOMMouseScroll 事件中为该属性使用 event.originalEvent.detail。此方法向后兼容旧的 jQuery 版本。

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

if 条件检查我们是否正在使用鼠标滚轮功能获取值。如果我们没有得到值，它将是一个“空”值。这样 bottom preventDefault 和 positioning 就不起作用了。

Have a Fiddle!!