Question

我有<div id="innerContent"> overflow-y:scroll;。 innerContent中锚点的链接位于父页面上，而不是div。

到目前为止，我已尝试使用anchors和scrollto来尝试在内容中滚动。它们都完成滚动，但innerContent的高度大于浏览器窗口，因此当单击链接时，整个父页面也会滚动到锚点。

有没有办法用javascript做这个，而不移动父页面？我无法控制div的高度 - 这是别人的设计。

这很接近......但这里没有答案。 How to automatic scroll inline div without scrolling the whole page?

谢谢！

Answer 1

此jsfiddle适用于Chrome。未在其他浏览器中测试过。

捕获鼠标滚轮事件，使用事件数据手动滚动，然后取消原始事件。对生产来说似乎有点混乱。

$('#scroll').bind('mousewheel', function(e){

    $(this).scrollTop($(this).scrollTop()-e.originalEvent.wheelDeltaY);

    //prevent page fom scrolling
    return false;    
});

Answer 2

使用固定布局。在this jsfiddle我有一个有效的例子。研究css。你不需要javascript。

Answer 3

受到Morlem代码的启发，但反过来工作：只有在向外滚动时才停止传播。纯粹的JS：

container.addEventListener('mousewheel', function(e) {
    var scrollingOverTheTop = (e.wheelDelta > 0 && this.scrollTop == 0);
    var scrollingOverTheBottom = (e.wheelDelta < 0 && (this.scrollTop >= this.scrollHeight - this.offsetHeight));
    if (scrollingOverTheBottom || scrollingOverTheTop) {
        e.preventDefault();
        e.stopPropagation();
    }
}, true);

Answer 4

如果您决定使用javascript（再次，就像KooiInc所说，如果您不需要js，请不要使用它），您可以尝试使用event.cancelBubble = true，这会阻止事件传播到父容器，以便页面看不到你的内部div滚动。您可以使用的附加命令是event.preventDefault()，这可以防止浏览器触发事件的默认行为（即滚动）。

Answer 5

我刚刚通过在CSS中创建以下内容解决了我的问题：

body.scroll_locked {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

然后，当我显示我的模态/灯箱，即JavaScript（jQuery）时，我将scroll_locked类添加到正文以将其锁定到位并删除该类以返回。看起来你可以为一个div一直在页面上的一个mouseenter / mouseleave事件做同样的事情，你想要有相同的效果。

$('body').addClass('scroll_locked');
$('body').removeClass('scroll_locked');

在没有移动页面的情况下在div中滚动

5 个答案: