css滚动条样式怎么设置

2019-12-17 18:50:30网站建设

为了做出更好的视觉效果,有时候需要用css改变浏览器或版块中滚动条的样式,那么应该怎么实现自定义滚动条样式呢?

一、设置css滚动条的7个属性说明(附参考图)。

css滚动条样式

1  ::-webkit-scrollbar 滚动条整体,可以设置宽度等
2  ::-webkit-scrollbar-button 滚动条两端的按钮
3  ::-webkit-scrollbar-track 外层轨道
4  ::-webkit-scrollbar-track-piece 内层滚动槽
5  ::-webkit-scrollbar-thumb 滚动的滑块
6  ::-webkit-scrollbar-corner 边角
7  ::-webkit-resizer 下角拖动块的样式

二、css改变浏览器滚动条样式。

只需将下面的css样式写在样式表内即可(可自行改成自己需要的样式)。

/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
}

三、css设置div版块滚动条样式。

1、html代码示例

<div class="test test-1">
<div class="scrollbar"></div>
</div>

2、设置滚动条css样式示例

.test {
  width   : 50px;
  height  : 200px;
  overflow: auto;
  float   : left;
  margin  : 5px;
  border  : none;
  }
  .scrollbar {
  width : 30px;
  height: 300px;
  margin: 0 auto;
  }
  .test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
  .test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }

css滚动条样式怎么设置相关

自定义滚动条样式详细设置方法

使用css设置自定义滚动条样式,是针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,那怎么设置好看的滚动条样式呢?

2020-08-14

DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢?

2020-08-14
怎么引入css的样式,方法有哪些?

CSS层叠样式表是用来控制网页样式和布局的,那么怎么引入CSS的样式,引用的方法有哪些呢?要知道使用不同的方法来引用css样式表,达到的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。

2020-07-05

在很多时候,为了内容布局效果,需要通过css让图片居中,那么要怎么让图片在div内水平居中呢,代码怎么写?一起来看看吧。

2019-12-17