overflow

最新推荐文章于 2023-10-22 16:47:19 发布

原创最新推荐文章于 2023-10-22 16:47:19 发布 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#overflow

html+css 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了 CSS 中的 overflow 属性及其子属性 overflow-x 和 overflow-y 的使用方法，包括不同值的意义、兼容性问题及在实际开发中的应用场景，如自定义滚动条样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、基本概念

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现元素框之外。

hidden 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的的内容。

inherit 规定应该从父元素继承overflow属性的值

2、overflow-x 和 overflow-y

如果这两个其中有一个值设置为hidden，则另一个则默认改为 auto

3、兼容性

出现上述情况的原因是，IE7中滚动条会占用盒子的宽度或者高度

IE7 浏览器默认：html {overflow: scroll }

IE8+ 等浏览器默认：html { overflow: auto }

在一些单页面应用中，去除掉滚动条，采用

html { overflow: hidden }

4、作用前提

（1）非 display：inline

（2）对应单元格td等，需要为table 设置，table-layout：fixed 状态

5、无论什么浏览器，默认滚动条均来自 <html> 而不是 <body> 标签

6、滚动条属性

（1）高度

Chrome ：document.body.scrollTop

其他浏览器： document.documentElement.scrollTop

var st = document.documentElement.scrollTop || docuement.body.scrollTop

（2）滚动条会占用容器的可用宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box{
      width: 400px;
      overflow: scroll;
    }

    .content{
      /*
        for IE7
      */
      zoom: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <div id="content" class="content"></div>
  </div>
</body>
<script>
  console.log( 400 - document.getElementById('content').clientWidth );

    //IE7 + /Chrome/FireFox (win7) 均是 17 像素
</script>
</html>

7、水平居中跳动问题的修复

（1）html { overflow-y : scroll } 即始终显示滚动条

（2）动态修复：

.container { padding-left : calc( 100vw -100% ); }

100vw ：浏览器默认宽度；100% ：可用内容宽度

8、自定义滚动条

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box{
      width: 400px;
      height: 200px;
      overflow: scroll;
    }

    /* 血槽宽度 */
    .box::-webkit-scrollbar{
      width: 8px;
      height: 8px;
    }
    
    /* 拖动条 */
    .box::-webkit-scrollbar-thumb{
      background-color: rgba(0,0,0,0.3);
      border-radius: 6px;
    }

    /* 背景槽 */
    .box::-webkit-scrollbar-track{
      background-color: #ddd
      border-radius: 6px;
    }

    .content{
      height: 400px;
      background-color: #00ff00;
      zoom: 1; /* for IE7 */
    }
  </style>
</head>
<body>
  <div class="box">
    <div id="content" class="content"></div>
  </div>
</body>
<script>
  console.log( 400 - document.getElementById('content').clientWidth );

    //IE7 + /Chrome/FireFox (win7) 均是 17 像素
</script>
</html>