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

1. overflow 属性介绍 2. overflow 属性的值 3. 自定义 overflow 的滚动条 1. overflow 属性介绍 css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。 当元素框中的内容溢出时,无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 值 描...
  • 1. overflow 属性介绍
  • 2. overflow 属性的值
  • 3. 自定义 overflow 的滚动条

1. overflow 属性介绍


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

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

2. overflow 属性的值


描述
visible 默认值。内容不会被修剪,溢出部分会呈现在元素框之外
hidden 内容被修剪,溢出部分不可见
scroll 内容被修剪,无论是否溢出滚动条都会占据空间
auto 当内容溢出时会被修剪且出现滚动条,没有溢出时不显示滚动条

3. 自定义 overflow 的滚动条


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

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

  1. <style>
  2. .container {
  3. width: 260px;
  4. height: 100px;
  5. background: lightblue;
  6. display: flex;
  7. overflow-x: scroll;
  8. margin: 20px;
  9. }
  10. .item {
  11. width: 260px;
  12. height: 100px;
  13. line-height: 100px;
  14. flex-shrink: 0;
  15. text-align: center;
  16. }
  17. .item:nth-child(odd) {
  18. background: lightcoral;
  19. }
  20. .item:nth-child(even) {
  21. background: lightgreen;
  22. }
  23. </style>
  24. <div class="container">
  25. <div class="item">1</div>
  26. <div class="item">2</div>
  27. <div class="item">3</div>
  28. <div class="item">4</div>
  29. <div class="item">5</div>
  30. </div>

macOS 中滚动条的默认样式:

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

站长源码网

选择器 描述
::-webkit-scrollbar 整个滚动条
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-scrollbar-thumb 滚动条上的滚动滑块
::-webkit-scrollbar-track 滚动条轨道

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

  1. /* 整个滚动条 */
  2. .container::-webkit-scrollbar {
  3. width: 4px;
  4. height: 7px;
  5. }
  6. /* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
  7. .container::-webkit-scrollbar-corner {
  8. background: #b9b9b9;
  9. }
  10. /* 滚动条上的滚动滑块 */
  11. .container::-webkit-scrollbar-thumb {
  12. background: #E1660E;
  13. border-radius: 10px;
  14. }
  15. /* 滚动条轨道 */
  16. .container::-webkit-scrollbar-track {
  17. background: #b9b9b9;
  18. border-radius: 2px;
  19. }

评论0

首页 导航 会员 客服