↩ zhcn 编程语言 Web相关 JSON 非公開: CSS 滚动条样式（溢出）

CSS 滚动条样式（溢出）

在学习CSS 框模型部分时，您了解到页面上的每个元素都可以被视为一个矩形框，并且您可以使用 CSS 来控制框的大小、位置和其他信息。默认情况下，如果元素中的内容超出了盒子的大小，例如元素内容区域的宽度和高度形成的矩形区域不足以容纳元素中的内容，则内容会部分突出盒子。

1.溢出

为了更好地处理溢出的内容，CSS提供了一个名为overflow的属性，允许您配置如何处理溢出元素的内容区域的内容。下表显示了属性的可选值。 :

价值	解释
visible	默认值不处理溢出内容，内容显示在元素内容区域之外
hidden	隐藏溢出元素内容区域的内容
scroll	隐藏溢出元素内容区域中的内容，在元素的左侧和底部创建滚动条，滑动滚动条即可显示元素内的所有内容
auto	当内容溢出时，元素左侧会创建一个滚动条，您可以滑动滚动条查看元素内的所有内容。
inherit	继承父元素的overflow属性值

[示例] 使用overflow属性设置元素内容区域溢出的处理方式：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 550px;
            height: 100px;
            margin-top: 20px;
            border: 1px solid red;
        }
        div.hidden {
            overflow: hidden;
        }
        div.scroll {
            overflow: scroll;
        }
        div.auto {
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="hidden">
        visible：デフォルト値、オーバーフローしたコンテンツには何もしません。コンテンツは要素のコンテンツ領域の外側に表示されます；<br>
        hidden：オーバーフローした要素のコンテンツ領域を非表示にします；<br>
        scroll：オーバーフローした要素のコンテンツ領域を非表示にし、要素の左側と下側にスクロールバーをそれぞれ作成します。スクロールバーをスライドして要素のすべての内容を表示できます；<br>
        auto：コンテンツがオーバーフローした場合、要素の左側にスクロールバーを作成して、すべてのコンテンツをスクロールバーで見ることができます；<br>
        inherit：親要素から「overflow」属性の値を継承します。
    </div>
    <div class="scroll">
        visible：デフォルト値、オーバーフローしたコンテンツには何もしません。コンテンツは要素のコンテンツ領域の外側に表示されます；<br>
        hidden：オーバーフローした要素のコンテンツ領域を非表示にします；<br>
        scroll：オーバーフローした要素のコンテンツ領域を非表示にし、要素の左側と下側にスクロールバーをそれぞれ作成します。スクロールバーをスライドして要素のすべての内容を表示できます；<br>
        auto：コンテンツがオーバーフローした場合、要素の左側にスクロールバーを作成して、すべてのコンテンツをスクロールバーで見ることができます；<br>
        inherit：親要素から「overflow」属性の値を継承します。
    </div>
    <div class="auto">
        visible：デフォルト値、オーバーフローしたコンテンツには何もしません。コンテンツは要素のコンテンツ領域の外側に表示されます；<br>
        hidden：オーバーフローした要素のコンテンツ領域を非表示にします；<br>
        scroll：オーバーフローした要素のコンテンツ領域を非表示にし、要素の左側と下側にスクロールバーをそれぞれ作成します。スクロールバーをスライドして要素のすべての内容を表示できます；<br>
        auto：コンテンツがオーバーフローした場合、要素の左側にスクロールバーを作成して、すべてのコンテンツをスクロールバーで見ることができます；<br>
        inherit：親要素から「overflow」属性の値を継承します。
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_623”对齐=“aligncenter”宽度=“1024”]

图：溢出属性演示[/caption]

2.溢出-x，溢出-7

CSS3还提供了两个属性：overflow-x和overflow-y。这些功能与溢出属性类似。该属性的可选值与overflow属性相同。

Overflow-x：设置当元素内容区域中的内容水平延伸远离元素时如何处理溢出内容。
Overflow-y ：设置当元素内容区域的内容垂直溢出元素时如何处理溢出内容。

提示：如果溢出-x 或溢出-y 属性之一设置为隐藏，则其他属性将自动设置为自动。另外，CSS3 尚未最终确定，因此这两个属性的效果可能会改变或调整。

浅显易懂的《CSS滚动条样式（溢出）》讲解！您必须观看的最佳 2 个视频

CSS Tips & Tricks – How to hide scrollbars on div elements.

https://www.youtube.com/shorts/_-eW4o73CkI

Hướng dẫn tùy biến scrollbar trong CSS

https://www.youtube.com/watch?v=iUFOP-kuRUg&pp=ygVHIENTUyDjgrnjgq_jg63jg7zjg6vjg5Djg7zjga7jgrnjgr_jgqTjg6sgKOOCquODvOODkOODvOODleODreODvCkmaGw9SkE%3D

JSON