• 1. overflow 属性介绍
  • 2. overflow 属性的值
  • 3. 自定义 overflow 的滚动条

1. overflow 属性介绍


css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。

当元素框中的内容溢出时,无非就是两种情况: ​​溢出部分隐藏​​​、​​溢出部分通过滚动条查看​

2. overflow 属性的值



描述

visible

默认值。内容不会被修剪,溢出部分会呈现在元素框之外

hidden

内容被修剪,溢出部分不可见

scroll

内容被修剪,无论是否溢出滚动条都会占据空间

auto

当内容溢出时会被修剪且出现滚动条,没有溢出时不显示滚动条

3. 自定义 overflow 的滚动条


以前不知道 overflow 的滚动条样式是可以修改的,最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式,才得知还有这么个东西,在此记录一下自定义滚动条的写法,这样可以更好的理解用法,虽然下次使用还要来这里看

首先,先来做一个有滚动条的容器

​​<style>​​
​​.container {​​
​​width: 260px;​​
​​height: 100px;​​
​​background: lightblue;​​
​​display: flex;​​
​​overflow-x: scroll;​​
​​margin: 20px;​​
​​}​​
​​.item {​​
​​width: 260px;​​
​​height: 100px;​​
​​line-height: 100px;​​
​​flex-shrink: 0;​​
​​text-align: center;​​
​​}​​
​​.item:nth-child(odd) {​​
​​background: lightcoral;​​
​​}​​
​​.item:nth-child(even) {​​
​​background: lightgreen;​​
​​}​​
​​</style>​​

​​<div class="container">​​
​​<div class="item">1</div>​​
​​<div class="item">2</div>​​
​​<div class="item">3</div>​​
​​<div class="item">4</div>​​
​​<div class="item">5</div>​​
​​</div>​​

macOS 中滚动条的默认样式:

CSS overflow 内容溢出时的显示方式_自定义

可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式

站长源码网

选择器

描述

::-webkit-scrollbar

整个滚动条

::-webkit-scrollbar-corner

当同时有垂直滚动条和水平滚动条时交汇的部分

::-webkit-scrollbar-thumb

滚动条上的滚动滑块

::-webkit-scrollbar-track

滚动条轨道

自定义滚动条样式代码示例:

​​/* 整个滚动条 */​​
​​.container::-webkit-scrollbar {​​
​​width: 4px;​​
​​height: 7px;​​
​​}​​
​​/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */​​
​​.container::-webkit-scrollbar-corner {​​
​​background: #b9b9b9;​​
​​}​​
​​/* 滚动条上的滚动滑块 */​​
​​.container::-webkit-scrollbar-thumb {​​
​​background: #E1660E;​​
​​border-radius: 10px;​​
​​}​​
​​/* 滚动条轨道 */​​
​​.container::-webkit-scrollbar-track {​​
​​background: #b9b9b9;​​
​​border-radius: 2px;​​
​​}​​

CSS overflow 内容溢出时的显示方式_css_02