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

Question

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

我已经添加了＆＃34; overflow-x：hidden＆＃34;隐藏80％宽度div并防止水平滚动。到目前为止一切都那么好，除了在移动设备上你可以触摸拖动（滚动）到其他不可滚动的内容（第二个div）。如果鼠标滚轮左右滚动（按下鼠标中键并向右和向左拖动鼠标），也会发生同样的情况。如何防止滚动发生，而不使第二个元素（宽度为80％）0％宽度？

Answer 1

这似乎是一个问题（我敢说bug）与webkit浏览器以及它们处理单轴溢出的方式......你可能已经注意到firefox没有受到影响。

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

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

正如其他人所说，我认为目前最好的解决方案是根据需要在导航菜单元素上使用display:none。 另一种方法是重新考虑如何构建和设计布局，并尝试以不会触发此错误的方式执行此操作。