11

我有一个样式为 的 div overflow-x: hidden，但我发现当其中有一个包含文本的更宽 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 侧的一些文本。

有什么解决办法吗？

4

5 回答 5

2

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

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

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

于 2012-04-13T15:42:02.617 回答
2

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

没有非 javascript 的解决方案，而且 javascript 仍然很混乱，因为如果滚动条不可见， onscroll 不会触发（也就是说，onscroll 事件与滚动条更改位置相关联，而不是元素的实际滚动）。

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

于 2012-04-13T15:52:35.513 回答
2

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

#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

于 2012-04-13T22:20:47.180 回答
1

假设简化的 HTML 代码是：

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

将 body 和 html 都设置为 height:100%;

body, html {height:100%;}

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

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);
于 2014-10-07T00:02:53.637 回答
0

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

于 2016-05-03T16:33:01.090 回答