显示隐藏的 div 时停止页面滚动答案

【问题标题】：Stop a page from scrolling when showing a hidden div显示隐藏的 div 时停止页面滚动
【发布时间】：2011-09-16 00:17:36
【问题描述】：

我有一个位于固定大小 div 内的选项卡窗格，每当该选项卡切换到大于外部 div 的选项卡时，整个页面都会向下滚动，以至于我无法再看到我的选项卡，我已经嘲笑它了在 jsfiddle 中显示问题。

请注意，为了看到问题，页面必须小于包含的 div。

jsFiddle

有谁知道在不使用 javascript 的情况下切换选项卡时如何阻止页面向下滚动？

【问题讨论】：

标签： jquery html css scroll

【解决方案1】：

你只需要evt.preventDefault();:

http://jsfiddle.net/vVJY4/2/

【讨论】：

这是一个惊人的答案。多年来，我一直想知道如何阻止这种行为。问题是，我明白为什么会这样。由于正在从页面流中添加和删除内容，因此滚动位置必须相应更改，但我不明白为什么您的解决方案实际上有效？无论如何，谢谢一百万！

【解决方案2】：

感谢您向我展示 evt.preventDefault() 它让我找到了正确的位置。单击时的链接指向我的隐藏 div，然后页面向下滚动到该 div。

要停止滚动，我也可以将 href 属性中的 id 删除到其他内容，

jsFiddle

【讨论】：

出于accessibility 和graceful degradation 的目的，我强烈建议您将那些已命名的锚点保留在其中。
另外，如果说这是一个不使用 JavaScript 的解决方案，就像说将锚点全部移除是一个解决方案一样。其实根本不写页面，就解决了！
@Adam 我最初认为这是我的一些 css 的问题，而不是 href attr。是原因。如果有任何意义的话，我不想得到更正卷轴的答案，而是那些从一开始就没有卷轴的答案。

【解决方案3】：

没有使用JavaScript？做不到。

使用 JavaScript 很简单：

evt.preventDefault();

http://jsfiddle.net/vVJY4/3/

【讨论】：

他的意思是说他不想离开使用 jQuery 的舒适区；)

【解决方案4】：

如果您想使用“纯”JavaScript，请使用：

function stopScroll()
{
    document.getElementById("body_id").style.overflow = "hidden";
}

function startScroll()
{
    document.getElementById("body_id").style.overflow = "auto";
}

【讨论】：