208

我有这个 div：

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

滚动条始终可见，即使文本没有溢出。我想让滚动条仅在必要时可见 - 也就是说，仅当框中有足够的文本需要它们时才可见。就像 textarea 一样。我该怎么做呢？或者是我唯一的选择来设置文本区域的样式，让它看起来像一个 div？

4

8 回答 8

419

使用overflow: auto. 滚动条只会在需要时出现。

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

于 2013-02-06T15:20:17.377 回答
16

试试这个：

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
于 2013-02-06T15:20:43.947 回答
8

尝试

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
于 2013-02-06T15:20:46.130 回答
6

尝试

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
于 2014-11-12T07:45:51.113 回答
4

将 CSS的溢出属性更改block为auto.

overflow: auto;

只有在需要时，它才会在左侧自动添加滚动条。

于 2021-07-04T10:39:59.313 回答
0

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

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
于 2018-04-05T14:29:34.747 回答
0

您可以尝试以下一种：

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
于 2019-03-25T09:28:13.043 回答
0

Stackblitz游乐场

<!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>
于 2021-08-05T07:44:36.373 回答