在div中滚动而不移动页面

我有一个ѭ0have和overflow-y:scroll;。 innerContent中的锚点链接位于父页面上，而不是在ѭ2中。到目前为止，我已经尝试使用锚点和scrollto来尝试在内容中滚动。它们都完成了滚动，但是innerContent的高度大于浏览器窗口的高度，因此单击链接时，整个父页面也会滚动到锚点。有没有办法在不移动父页面的情况下使用javascript执行此操作？我无法控制div的高度-这是别人的设计。这很接近...但是这里没有答案。如何在不滚动整个页面的情况下自动滚动内联div？谢谢！

已邀请:

5 个回复

疼嘶桐

这个jsfiddle可以在Chrome中为我工作。未经其他浏览器测试。捕获鼠标滚轮事件，使用事件数据手动滚动，然后取消原始事件。生产似乎杂乱无章。

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

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

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

田损比报

使用固定的布局。在这个jsfiddle中，我有一个有效的示例。研究CSS。您不需要javascript。

鲁釜头

受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);

泉秘胁

而且，如果您决定使用javascript（同样，如KooiInc所说，如果不需要js，则不要使用它），则可以尝试使用ѭ5which，这样可以防止事件传播到父容器，因此该页面将看不到您的inner-div滚动。您可以使用的附加命令是“ 6”，以防止浏览器触发事件的默认行为（即滚动）。

蜂佬渺

我只是通过在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 个回复

发起人

scroll

javascript

html

anchor

问题状态

在div中滚动而不移动页面

与内容相关的链接

5 个回复

发起人

scroll

javascript

html

anchor

问题状态