CSS Make Div Scrollable

我们将在本文中了解 CSS 如何使 div 可滚动。

Div

"div" 是在 HTML 文档中定义分区的 HTML 元素。

语法

<div> 和 </div> 是上述语法中的开始标签和结束标签。内容写在开始标签和结束标签之间。

我们可以通过设置 div 元素的高度和宽度并利用 CSS overflow 属性来使 <div> 元素可滚动。

CSS Overflow

它是 CSS 属性，用于防止内容溢出容器。

语法

我们可以将 CSS overflow 属性的值设置为 "auto" 或 "scroll"。尽管 CSS overflow 属性可以采用各种值来使 <div> 元素可滚动，但我们只能给定值 "auto" 或 "scroll"。以下是 overflow 值的描述：

• Auto: 如果内容适合容器，"auto" 选项会保持原样。如果不适合，"auto" 选项会添加一个滚动条。
• Scroll: 它用于裁剪溢出的内容，并根据 HTML 元素的大小，垂直、水平或垂直和水平地添加滚动条。

垂直滚动条

我们可以通过利用 CSS overflow-x 和 CSS overflow-y 属性来创建垂直滚动条。

语法

overflow-x 属性被赋予 "hidden" 值，这会隐藏 x 轴的滚动条，而 overflow-y 属性被赋予 "auto" 值，这会在垂直侧创建滚动条。

水平滚动条

我们可以通过利用 CSS overflow-x 和 CSS overflow-y 属性来创建水平滚动条。

语法

overflow-y 属性被赋予 "hidden" 值，这会隐藏 x 轴的滚动条，而 overflow-y 属性被赋予 "auto" 值，这会在水平侧创建滚动条。

Div 可滚动的演示

让我们通过演示来了解如何使 div 可滚动。

演示 1

在以下演示中，我们将构建一个带有“container”类的 div 元素。

我们将通过将 CSS overflow 属性的值设置为“scroll”来使 div 可滚动。

代码

输出

下面是结果，我们可以看到滚动条出现在带有“container”类的 <div> 元素上。

演示 2

在以下演示中，我们将构建一个 div 元素并通过将 CSS overflow 属性设置为 auto 来使其可滚动。

写在“div1”类中的内容适合其中，因此使用“auto”值到 overflow 属性时不会出现滚动条。

“div2”类中的内容不适合其中，因此借助“auto”值到 overflow 属性出现了滚动条。

代码

输出

下面是结果，我们可以看到 div1 类中的内容没有溢出，这就是为什么看不到滚动条的原因。

写在 div2 类中的内容溢出，因此滚动条出现在 div2 类的元素上。

演示 3

我们将借助 CSS overflow-x 属性和 CSS overflow-y 属性在 <div> HTML 元素上放置一个垂直滚动条。

我们将 "hidden" 值赋给 CSS overflow-x 属性，将 "auto" 值赋给 CSS overflow-y 属性。

代码

输出

在这里，在结果中，我们可以看到当 <div> HTML 元素中的内容溢出时，垂直滚动条在 <div> HTML 元素上可见。

演示 4

我们将借助 CSS overflow-x 属性和 CSS overflow-y 属性在 <div> HTML 元素上放置一个水平滚动条。

我们将 "auto" 值分配给 CSS overflow-x 属性，将 "hidden" 值分配给 CSS overflow-y 属性。

代码

输出

在这里，在下面的结果中，我们可以看到 <div> 元素下的内容不适合。

滚动条在 <div> 元素的水平侧可见。

浏览器支持

支持 overflow、overflow-x 和 overflow-y CSS 属性的浏览器如下：

• Safari
• 谷歌浏览器
• Microsoft Edge
• 火狐
• Opera

结论

我们已经在本文中了解了如何创建 CSS div 可滚动。下面给出了一些需要记住的要点：

• 我们可以通过利用 overflow、overflow-x 和 overflow-y CSS 属性来构建可滚动的 div。
• 要使 div 可滚动，我们可以将 CSS overflow 属性的值设置为 "auto" 或 "scroll"。
• 如果我们需要垂直滚动条，则 overflow-x 被赋予 "hidden" 值，而 overflow-y 被赋予 "auto" 值。
• 如果我们需要水平滚动条，则 overflow-x 被赋予 "auto" 值，而 overflow-y 被赋予 "hidden" 值。