如何使 div 上的滚动条仅在必要时可见？
Posted
技术标签:
【中文标题】如何使 div 上的滚动条仅在必要时可见？【英文标题】：How do I make the scrollbar on a div only visible when necessary? 【发布时间】：2013-01-21 20:24:53 【问题描述】：我有这个 div：
<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>
滚动条始终可见，即使文本没有溢出。我想让滚动条仅在必要时可见 - 也就是说，仅当框中有足够的文本需要它们时才可见。就像 textarea 一样。我该怎么做呢？还是我唯一的选择是设置 textarea 的样式，使其看起来像一个 div？
【问题讨论】：
这个怎么样。悬停时仅显示滚动条。不确定这对您是否有用。 ***.com/questions/7125185/… codepen.io/anon/pen/QwLeMG希望对你有帮助overflow: auto; 不适用于 android :-(
【参考方案1】：
Stackblitz Playgrond
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#scrollable-content
background: #eee;
height: 150px;
width: 400px;
overflow-y: scroll;
</style>
</head>
<body>
<div id="original-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
<br />
<div id="scrollable-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
</body>
</html>
【讨论】：
【参考方案2】：将 CSS block 的 overflow 属性更改为 auto。
overflow: auto;
它只会在需要时自动向左侧添加滚动条。
【讨论】：
【参考方案3】：您可以尝试以下一种：
<div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
【讨论】：
谢谢，这很有帮助。如果您没有特定的高度/宽度（更动态的 UI），此解决方案效果最佳。【参考方案4】：我发现 div 的高度仍然显示，无论是否有文本。因此，您可以使用它来获得最佳效果。
<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
【讨论】：
【参考方案5】：试试
<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
【讨论】：
【参考方案6】：试试
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
【讨论】：
【参考方案7】：试试这个：
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
【讨论】：
【参考方案8】：使用overflow: auto。滚动条只会在需要时出现。
（旁注，您也可以仅指定 x 或 y 滚动条：overflow-x: auto 和 overflow-y: auto）。
【讨论】：
请注意，只有指定max-height，overflow-y 才有效
overflow-y 不需要最大高度。我从来没有将 max-height 与 overflow-y 一起使用，而且每次都有效。
@Sumafu 根据具体情况，您可能需要它，我现在可以体验到。
如果您在溢出元素上使用absolute 或fixed 位置，则需要设置height 或max-height，因为这些会阻止元素根据页面或视口边界调整大小。 以上是关于如何使 div 上的滚动条仅在必要时可见？的主要内容，如果未能解决你的问题，请参考以下文章