【问题标题】：CSS: make overflow-x: hidden truly hidden?CSS: make overflow-x: hidden 真的隐藏了？
【发布时间】：2022-02-15 04:02:07
【问题描述】：

我有一个样式为overflow-x: hidden 的 div，但我发现当其中有一个包含文本的更宽 div 时，用户仍然可以用鼠标横向拖动以查看隐藏的文本。

我想防止这种情况发生并真正隐藏文本。这个 jsfiddle 应该显示我的意思：http://jsfiddle.net/YzsGF/11/ 或者这里是代码：

<div id="outer">
   <div id="inner">
       How can I truly hide the text beyond the margin?
    </div>
</div>
#outer { 
    width: 150px; 
    height: 300px; 
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    width: 300px;
    overflow-x: hidden;
}

有没有办法阻止用户看到隐藏的文字？

更新：我需要溢出-y 才能工作：溢出-x 只是 CSS3 没关系。这可能有助于解释现实生活中的场景：

我有一个固定宽度但长度未知的内部 div。
当它足够短以适应没有 y 滚动条的外部 div 时，一切都很好。
当内部 div 变得足够长以至于外部 div 需要一个 y 滚动条时，会出现一个，但会切断内部 div 右侧的一些内容。这也可以（我故意留下了一些 RH 填充），但不好的是用户可以选择文本并将其拖动到侧面，从而显示空的 RH 填充并隐藏 LH 侧的一些文本。

有什么解决办法吗？

【问题讨论】：

视觉上这样做了，但选择副本仍然会选择你看不到的东西 - 奇怪：jsfiddle.net/mikevoermans/YzsGF/14
overflow-x 在 IE8 及更低版本中存在问题。
@mikevoermans：这没什么奇怪的。实际内容不会被截断（也不应该！）。
javascript 是一个选项吗，文本是否应该可以选择？
记住 overflow-x 是一个 css3 属性。

标签： html css

【解决方案1】：

您可以使用 CSS clip 属性。这将根据需要剪切您的文本，不会显示剪切矩形之外的任何内容，并且还会阻止用户滚动。

#inner { 
position:absolute;
clip:rect(0px,150px,150px,0px);
width: 300px;
}

示例：

http://jsfiddle.net/DigitalBiscuits/YzsGF/18/

注意：您需要为此剪辑属性指定一个绝对定位才能正常工作。

更多信息在这里： http://www.w3schools.com/cssref/pr_pos_clip.asp

【讨论】：

谢谢，但这会禁用 y 滚动条，所以对我不起作用。不过，在许多情况下，这可能是一个很好的答案。
滚动条仍然存在，但会被剪掉。这个修改后的 jsfiddle 演示了这一点....内容仍然可以使用鼠标在 y 轴上滚动：jsfiddle.net/DigitalBiscuits/YzsGF/22

【解决方案2】：

overflow-x: hidden，不像overflow: hidden 不禁用滚动。它只是导致内容被剪辑并隐藏滚动条。元素本身仍然可以通过 javascript 滚动，或者正如您在某些元素自动滚动的选择场景中发现的那样。

没有非javascript的解决方案，而且javascript还是乱七八糟，因为如果滚动条不可见，onscroll不会触发（也就是说，onscroll事件是绑定到滚动条改变位置，而不是元素的实际滚动)。

有多种解决方法。 Andrew Dunn 将overflow:hidden 放在包装器上并将包装器设置为容器宽度的解决方案是其中之一。但这只是解决问题，并不能解决实际问题。但是，如果您对此感到满意，那么它可能是一个不错的选择。请记住，您需要将此技术应用于容器中的所有项目，否则您可能会遇到同样的问题。

【讨论】：

实际上，overflow: hidden 并不一定会禁用任一轴上的滚动。
@BoltClock'saUnicorn - 可能不是 javascript，但它没有选择滚动问题

【解决方案3】：

我不确定您是否需要内部 div 的 y 轴可滚动，但如果您不需要，那么这应该适合您的需求：

#outer { 
    width: 150px; 
    height: 300px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}

overflow 和overflow-x 的行为似乎彼此不同。 http://jsfiddle.net/G3T9w/5/

【讨论】：

【解决方案4】：

假设简化的 HTML 代码是：

<html><body><div class=wrap>content...</div></body></html>

设置body, html到height:100%;

body, html {height:100%;}

在 body 中放置一个 div，并将其设置为横跨整个 body 高度：

div.wrap {height:100%; overflow:hidden;}

这将防止窗口以奇怪的方式滚动，例如按下鼠标滚轮并移动它，使用锚点等。

要删除滚动条本身（视觉上），您还应该添加：

body {overflow: hidden; }

通过按键盘上的箭头键禁用滚动：

window.addEventListener("keydown", function(e) {
    // space, page up, page down and arrow keys:
    if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

【讨论】：

很有可能，如果我禁用滚动，我想使用整个窗口。这可以通过body{margin:0} 完成。否则（至少在我的 Chrome 设置中）你会失去一个小边框。

【解决方案5】：

对我来说最简单的答案是将 CSS 样式 position: fixed; 添加到 <body> 标记中。

【讨论】：