如何使div上的滚动条仅在必要时可见？

151

我有这个股利：

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

即使文本不会溢出，滚动条也始终可见。我想使滚动条仅在必要时可见-即，仅在框中需要它们的文本时才可见。就像文本区域一样。我该怎么做呢？还是我唯一选择设置文本区域样式以使其看起来像div的选择？

css html scrollbar

— 贝努伯德
source

那这个呢。悬停时仅显示滚动条。不知道这对您是否有用。stackoverflow.com/questions/7125185/...

— 瑞安蟠龙

codepen.io/anon/pen/QwLeMG希望这对您有所帮助

— vishalkin 2014年

overflow: auto;在Android上不起作用：-(

— aioobe

312

使用overflow: auto。滚动条仅在需要时显示。

（旁注，您也可以只为x或y滚动条指定：overflow-x: auto和overflow-y: auto）。

— 隐藏的
source

5

请注意，overflow-y仅在您指定时有效max-height

— 黑色

1

溢出-y不需要最大高度。我从未将max-height与溢流y一起使用，并且每次都能正常工作。

— 苏门答（Sumafu）

1

@Sumafu您可能需要视情况而定，因为我现在可能会遇到这种情况。

— 大卫，

1

如果要在overflow元素上使用或定位，则将需要height或进行max-height设置，因为这会阻止元素根据页面或视口边界调整大小。absolutefixed

— Scott Schupbach

15

试试这个：

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

— 克莱诺哈德
source

7

尝试

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

— 巴氏
source

6

尝试

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">

— GryTyagi
source

0

我发现，无论是否有文字，div的高度仍在显示。因此，您可以使用它来获得最佳效果。

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>

— 谢兰德拉·库玛（Shailendra Kumar）
source

0

您可以尝试以下一种：

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>

— Papun Sahoo
source