如何在必要时才能使div上的滚动条可见?

时间:2013-02-06 15:18:45

标签: css html scrollbar

我有这个div:

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

即使文本没有溢出,滚动条也始终可见。我想让滚动条仅在必要时可见 - 也就是说,只有当盒子中有足够的文本需要它们时才可见。像textarea一样。我该怎么做呢?或者我是唯一选择textarea样式的选项,所以看起来像div?

8 个答案:

答案 0 :(得分:255)

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

(旁注,您也可以仅指定x或y滚动条:overflow-x: autooverflow-y: auto)。

答案 1 :(得分:12)

试试这个:

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

答案 2 :(得分:6)

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

答案 3 :(得分:6)

尝试

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

答案 4 :(得分:0)

我发现有div的高度仍然显示,当它有文字或没有。因此,您可以使用它来获得最佳效果。

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

答案 5 :(得分:0)

您可以尝试以下一种方法:

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

答案 6 :(得分:0)

将 CSS blockoverflow 属性更改为 auto

overflow: auto;

它会在需要时自动向左侧添加滚动条。

答案 7 :(得分:0)

Stackblitz Playgrond

it("...", async () => {
  const result = await request(...).get(...)

  // Do assertions on result
  ...

  // No need to return anything here
}