在不移动页面的情况下在 div 内滚动答案

【问题标题】：Scrolling within a div without moving page在不移动页面的情况下在 div 内滚动
【发布时间】：2014-07-26 00:06:11
【问题描述】：

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

到目前为止，我已经尝试过锚点和滚动条来尝试在内容中滚动。它们都完成了滚动，但是innerContent的高度大于浏览器窗口，所以点击链接时整个父页面也会滚动到锚点。

有没有办法在不移动父页面的情况下使用 javascript 来做到这一点？我无法控制 div 的高度——这是别人的设计。

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

谢谢！

【问题讨论】：

你可以只使用 iframe 吗？看起来可能会更容易。
这是一个仅使用 Javascript 的不错答案：stackoverflow.com/a/3730577/1374474

标签： javascript html scroll anchor

【解决方案1】：

这个jsfiddle 在 Chrome 中为我工作。未在其他浏览器中测试。

捕获鼠标滚轮事件，使用事件数据手动滚动，然后取消原始事件。看起来可能对生产造成混乱。

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

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

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

【讨论】：

适用于位置：也已修复。 jsfiddle.net/wizonesolutions/Qfk8K，它确实可以在 Firefox 中使用。
我找到的最佳解决方案。应该向天空 +1（也可以与 live 一起使用（只需将 live 替换为 bind））。

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用固定布局。在this jsfiddle 我有一个工作示例。研究CSS。你不需要 javascript。

【讨论】：

即使是固定位置布局，如果整个滚动的 div 当时不在浏览器窗口中，我仍然会在 div 滚动时出现页面跳转。
实际上，我想我有一些东西破坏了它。当我从头开始构建时，没有花里胡哨的东西，它似乎像你说的那样保持不变。
好吧，在尝试了一上午之后，我意识到 css 答案不起作用。我仍然需要页面和 div 上的垂直滚动条。我只是不希望页面在 div 内容移动时移动。我会继续寻找JS的解决方案。

【解决方案4】：

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

【讨论】：

【解决方案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');

【讨论】：