溢出

内容溢出

为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

在一个网页元素内，给定了元素的高度，如果元素内的内容高度之和超出了元素的高度，就会出现内容溢出。通常，我们通过给元素定高来创建滚动条。

这里，我们需要使用css的overflow属性来控制内容溢出后，内容如何展现。

CSS属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的简写属性。

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

复制代码

文字溢出

text-overflow属性可以控制文字在元素内的溢出。

white-space CSS 属性是用来设置如何处理元素中的空白 (en-US)。

空白包括空格或者换行符。

如果white-space设置为nowrap,当文字超出了元素的宽度，文字不会换行，溢出就出现了。为了让text-overflow生效，必须设置overflow属性为hidden。

一般在容器的极限处进行截断。

效果图如下:

可以看到，浏览器对左右极限的设置支持度并不友好，仅支持右极限，clip或者ellipsis，fade值并不支持。浏览器兼容表如下:

滚动条

如果元素出现了滚动条，那么当我们滑动滚动条时。scrollTop属性将会伴随着滚动而变化。

Element.scrollTop（scrollLeft同理，本文略过）

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

1639538787(1).png 由如上图示，可以得出一个公式，当scrollHeight - offsetHeight - scrollTop === 0时，可以认为滚动条滚动到了底部。基于这个公式，我们可以实现上拉刷新，下拉加载的效果。

定制滚动条的样式

滚动条的样式定制在各大浏览器厂商的实现不同，兼容性处理也是一个比较棘手的问题。

结论是:为了实现较好的滚动条样式，我们可以自己实现虚拟滚动条，不过这需要大量的工作。自实现滚动条不在本文介绍范围，原理就是动态计算元素的scrollHeight,scrollTop,然后对应地去改变滚动条的位置。目前这篇文章正在构思中，有需要的读者可以关注我。

通用样式定制

-   ::-webkit-scrollbar — 整个滚动条.
-   ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
-   ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
-   ::-webkit-scrollbar-track — 滚动条轨道.
-   ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
-   ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
-   ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
复制代码

1639544773(1).jpg 下面是完整的代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .scroll-top {
            width: 100%;
            height: 100px;
            background: rgba(0, 0, 0, 0.4);
            color: #111;
        }

        .visible-content {
            background: #1650af;
            color: #fff;
            height: 600px;
            overflow: auto;
            overflow-x: scroll;
        }
        /* 控制整个滚动条 */
        .visible-content::-webkit-scrollbar {
            height: 20px;
            width: 20px;
        }
        /* 控制按钮 */
        .visible-content::-webkit-scrollbar-button {
            background: orange;
            border-radius: 50%;
        }

        /* 控制滑块 */
        .visible-content::-webkit-scrollbar-thumb {
            background: orange;
        }

        /* 控制轨道 */
        .visible-content::-webkit-scrollbar-track {
            background: #eee;
            border-radius: 5px;
        }
        /* 控制交叉部分 */
        .visible-content::-webkit-scrollbar-corner {
            background: orange;
            border-radius: 50%;
        }

        .scroll-bottom {
            width: 100%;
            height: 100px;
            background: rgba(0, 0, 0, 0.4);
            color: #111;
        }
    </style>
</head>

<body>
    <div style="width: 800px;margin:0 auto;">
        <div class="scroll-top">被卷出去的顶部</div>
        <div class="visible-content">
            <div style="width: 80%;height: 800px;background: #fff;color: #111;margin: 0 auto;">可滚动的部分</div>
        </div>
        <div class="scroll-bottom">被卷出去的底部</div>
    </div>
</body>

</html>
复制代码

控制好你的滚动条

溢出

内容溢出

文字溢出

滚动条

Element.scrollTop（scrollLeft同理，本文略过）

定制滚动条的样式

通用样式定制

猜你喜欢