美文网首页
改变浏览器滚动条样式

改变浏览器滚动条样式

作者: _章鱼丸子 | 来源:发表于2018-03-26 19:40 被阅读0次

    webkit浏览器css设置滚动条:

    ::-webkit-scrollbar //滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。(位置1)

    ::-webkit-scrollbar-button //滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。(位置2)

    ::-webkit-scrollbar-track  // 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置3)

    ::-webkit-scrollbar-track-piece  //内层轨道,滚动条中间部分(位置4)

    ::-webkit-scrollbar-thumb //滚动条里面可以拖动的那部分(位置5)

    ::-webkit-scrollbar-corner //边角(位置6)

    ::-webkit-resizer //定义右下角拖动块的样式(位置7)


    注:对以上各个部分定义width,height时。有如下功能:若是水平滚动条,则width属性不起作用,height属性用来控制滚动条相应部分竖直方向高度;若是竖直滚动条,则height属性不起作用,width属性用来控制相应部分的宽度。

    相关文章

      网友评论

          本文标题:改变浏览器滚动条样式

          本文链接:https://www.haomeiwen.com/subject/kzxdcftx.html