在不移动页面的情况下，在一个div内滚动

Question

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

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

有没有一种使用JavaScript的方法，在不移动父页面的情况下完成这个操作？我无法控制

的高度-这是其他人的设计。

这个链接接近了答案...但是这里没有答案。 How to automatic scroll inline div without scrolling the whole page? 谢谢！

- amy

---

你能否只使用一个 iframe 吗？这样似乎更容易些。 - cwallenpoole

这里有一个使用Javascript编写的不错的答案：https://dev59.com/0lDTa4cB1Zd3GeqPJ4ZA#3730577 - UserEleventyOne

Answer 1

这个 jsfiddle 在我用的 Chrome 浏览器中有效。未在其他浏览器中测试。

捕获鼠标滚轮事件，利用事件数据手动滚动，然后取消原始事件。对于生产环境可能有潜在的混乱。

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

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

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

- Morlem

---

也适用于position: fixed。http://jsfiddle.net/wizonesolutions/Qfk8K/，并且在Firefox中可以正常工作。 - wizonesolutions

我找到的最佳解决方案。应该被高度赞扬（也适用于live（只需将live替换为bind））。 - Andrius Naruševičius

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

- Antoine

Answer 3

使用固定布局。在这个 jsfiddle中，我有一个可用的示例。研究一下 CSS。你不需要 JavaScript。

- KooiInc

---

即使使用了固定定位布局，当div滚动时，如果整个可滚动区域不在浏览器窗口中，仍然会出现页面跳动。 - amy

实际上，我认为在其中有一些东西正在破坏它。当我从零开始构建而没有添加任何花哨的东西时，它似乎保持固定，就像你说的那样。 - amy

好的，经过整个早上的尝试，我意识到 CSS 的解决方案行不通。我仍然需要页面和 div 上的垂直滚动条，只是当 div 内容发生变化时，我不希望页面移动。我会继续寻找 JS 解决方案。 - amy

Answer 4

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

- Alexander Tsepkov

Answer 5

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

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

然后，当我展示我的JavaScript模态框/灯箱（使用jQuery）时，我会向body添加scroll_locked类来锁定它，再删除该类以返回。如果您希望在页面上始终存在的div元素上实现相同效果，似乎可以通过mouseenter/mouseleave事件执行相同操作。

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

- Brandon McKinney