Javascript 或 CSS 以防止在内容溢出的元素内滚动

Question

我有这个正在开发中的网站。在 body 标签内，我有两个并排的绝对定位 div。一个是窗口宽度的 100%，另一个是 80%。它们被占窗口 100% 宽度的 body 标签包裹。

我在正文中添加了“overflow-x:hidden”以隐藏 80% 宽度的 div 并防止水平滚动。到目前为止一切顺利，除了在移动设备上您可以触摸拖动(滚动)到其他不可滚动的内容(第二个 div)。如果您左右滚动鼠标滚轮(按下鼠标中键并左右拖动鼠标)，也会发生同样的事情。如果不使第二个元素(宽度为 80% 的元素)为 0% 宽度，我该如何防止滚动发生？

Answer 1

这似乎是 webkit 浏览器及其处理单轴溢出的方式的问题(我敢说是错误)...您可能已经注意到 firefox 不受影响。

经过一些实验，它看起来可能是由 overflow-x:hidden 与基于百分比的高度的组合触发的 - 参见 fiddle ，问题最初并不存在于此，但如果您取消注释 height:100% css 并再次运行它，您会注意到问题 list :

http://jsfiddle.net/OACDesigns/WFkSY/6/

正如其他人所提到的，我认为此时最好的解决方案是根据需要在导航菜单元素上使用 display:none。 另一种方法是重新考虑布局的结构和样式，并尝试以不会触发此错误的方式进行。