设置滚动条

最新推荐文章于 2024-05-21 00:00:00 发布

我想当话家

最新推荐文章于 2024-05-21 00:00:00 发布

阅读量1.8k

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/qq_50148250/article/details/125950499

版权

本文详细讲解了滚动条的用法，包括overflow属性的设置（visible、auto、hidden、scroll），并强调了如何针对不同场景调整滚动条的显示与隐藏。此外，还介绍了如何修改滚动条的样式，以适应各种浏览器差异。

摘要由CSDN通过智能技术生成

滚动条

滚动条用法

overflow-y：当区域内容超过其指定高度时对滚动条的管理；

overflow-x：当区域内容超过其指定宽度时对滚动条的管理；

overflow：相当于同时设置overflow-x和overflow-y

参数:

visible：扩大面积以显示所有内容

auto：仅当内容超出限定值时添加滚动条

hidden：总是隐藏滚动条

scroll：总是显示滚动条

注意！

1、滚动条的设置只对设置了固定宽（或高）的块级区域有效（因为只有块级区域能设置宽高）。当设置显示滚动条时，只有当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。

2、设置滚动条时，一般只设置横向滚动条和纵向滚动条的其中一个。因为当超过区域时设置了滚动条显示，当纵向能延展时，横向也能延展就会出现问题。其中一个滚动条就不能在页面上显示。例如下图，横向滚动条就不能正确显示。当页面视口有滚动条时，自己在页面上有超过视口会显示的滚动条，则互相冲突，自己写的块级区域内滚动条不能正确显示。

3、当想完全隐藏整个浏览器视口的滚动条时，要用scroll=“no”，可隐藏滚动条;

滚动条样式修改

因为每个浏览器默认的滚动条不一样，自己在页面上使用滚动条时，可以对滚动条做样式的修改。

  <style>
      .bar {
        height: 300px;
        width: 250px;
        overflow-y: scroll;
        border: 1px solid #ccc;
        margin-left: 400px;
        margin-top: 50px;
      }
      /* 设置滚动条的样式 宽高、背景色*/
      ::-webkit-scrollbar {
        width: 10px;
        background-color: rgb(239, 217, 217);
      }
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb {
        border: 1px solid red;
        border-radius: 10px;
        background: pink;
      }
    </style>