溢出时禁用鼠标滚动-x：隐藏[CSS，HTML]答案

【问题标题】：Disable mouse scroll when overflow-x: hidden [CSS,HTML]溢出时禁用鼠标滚动-x：隐藏[CSS，HTML]
【发布时间】：2014-12-30 04:16:41
【问题描述】：

问题：我的 div 的内容定位为“绝对”，并且内容的宽度大于 div。根据需要，使用“overflow-x: hidden”剪切“额外”内容。

不过，如果我尝试使用鼠标滚轮进行水平滚动，内容会变得可见。

我怎样才能不让这种情况发生？我可以使用 JS 或/和 CSS 解决方案

例如代码

<body width='1000px'>
  <div style='background-color: blue; width: 1200px'>contents</div>
</body>

谢谢！

【问题讨论】：

【解决方案1】：

我有同样的问题，如果你把它放在一个包装器中，那么它会阻止触控板滚动。

#wrapper { 
    position: absolute;
    width: 100%;
    overflow-x: hidden;
}

【讨论】：

这是最简单、最干净的解决方案。
感谢@sgengler，这是一个很大的帮助。如果你在上面设置了overflow-x: hidden; 和position: relative;，你实际上可以直接在body 上使用它

【解决方案2】：

我认为文档正文的默认行为是允许滚动对它来说太大的内容。这似乎不太容易解决。

您可以尝试使用另外一个 DIV 并将宽度放在上面，而不是在 BODY 上指定宽度。

<div style="width:1000px;">
  <div style="width:1200px;"></div>
</div>

你有什么理由必须在 BODY 标签上加上宽度？

【讨论】：

【解决方案3】：

你必须使用

$("element").on('mousedown', function(e) {}

只需将live 更改为on

【讨论】：