【不一样的CSS】深入理解 overflow (溢出要学会处理)
【不一样的CSS】深入理解 overflow (溢出要学会处理)
写在前面
对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。
最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。
该系列的导航帖
里面可以快速跳转到你想了解的文章(建议收藏)
overflow 的基本属性
概述
overflow
属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个常用的值：
-
visible: 默认值。内容不会回修剪，可以呈现在元素框之外。 -
hidden: 如果内容超出父级容器，超出部分将会被隐藏 -
scroll: 无论是否超出容器，都会出现一个滚动条。 -
auto: 如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<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>overflow基本属性</title>
<style>
.main {
width: 1200px;
display: flex;
justify-content: space-between;
margin: 0 auto;
.container {
height: 210px;
width: 260px;
background-color: #70a1ff;
img {
width: 300px;
opacity: 0.7;
.visible {
/* 超出部分溢出显示 */
overflow: visible;
.hidden {
/* 超出部分被隐藏 */
overflow: hidden;
.scroll {
/* 水平垂直都出现滚动条，可以滚动显示*/
overflow: scroll;
.auto {
/* 超出部门出现滚动条，未超出部门可以正常显示 */
overflow: auto;
</style>
</head>
<div class="main">
<div class="container visible"><img src="../image/img.jpg" /></div>
<div class="container hidden"><img src="../image/img.jpg" /></div>
<div class="container scroll"><img src="../image/img.jpg" /></div>
<div class="container auto"><img src="../image/img.jpg" /></div>
</div>
</body>
</html>执行结果如下所示：
overflow-x 与 overflow-y
overflow-x
与
overflow-y
可以分别设置水平和垂直时溢出的部分该怎么怎么处理。
值得注意的是
，如果
overflow-x
与
overflow-y
的值相同，结果等同于
overflow
；如果
overflow-x
与
overflow-y
的值不相同，且其中一个属性的值被赋予
visible
，另外一个被赋予一个 非
visible
的值，第一个被赋予
visible
的值会自动变为
auto
。
使用 overflow 的前提
为使
overflow
有效果，容器必须满足以下条件：
-
dispaly的值非inline。 -
具有尺寸限制。(
width/height/max-width/max-height/absolute拉伸 ) -
对于单元格
td等,还需要table为table-layout: fixed才可以。
overflow 与滚动条
滚动条出现的条件
滚动条出现条件主要分为以下两种：
-
使用
overflow属性出现的滚动条 -
HTML 元素自带的，例如
<html>和<textarea>属性。
值得注意的是 ，默认滚动条是来自于<html>元素而不是<body>元素。滚动条也会占用用容器的可用宽度或者高度
获取滚动条高度
获取滚动条高度的 JavaScript 代码如下：
let st = document.documentElement.scrollTop || document.body.scrollTop;
自定义滚动条
webkit
内核提供了以下适用于
webkit
内核的浏览器自定义滚动条的样式的属性，具体如下：
-
::-webkit-scrollbar— 整个滚动条. -
::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头). -
::-webkit-scrollbar-thumb— 滚动条上的滚动滑块. -
::-webkit-scrollbar-track— 滚动条轨道. -
::-webkit-scrollbar-track-piece— 滚动条没有滑块的轨道部分.
示例代码如下所示：
<!DOCTYPE html>
<html lang="en">
<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>自定义滚动条</title>
<style>
body {
height: 1000px;
/* 整个滚动条. */
::-webkit-scrollbar {
width: 12px;
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #ff7875;
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
background-color: #ffc069;