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

Javascript or CSS to prevent scrolling inside element with overflown content

本文关键字：溢出滚动元素 CSS Javascript 更新时间：2023-09-26

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

在正文中，我添加了"overflow-x:hidden"来隐藏80%宽度的div，并防止在水平方向上滚动。到目前为止，一切都很好，只是在移动设备上，您可以触摸拖动（滚动）到其他不可折叠的内容（第二个div）。如果鼠标滚轮左右滚动（按下鼠标中键并左右拖动鼠标），也会发生同样的情况。在不使第二个元素（80%宽度的元素）为0%宽度的情况下，我如何防止滚动发生？

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

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

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

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