美文网首页
一个简单的浏览器滚轮样式

一个简单的浏览器滚轮样式

作者: 甘道夫老矣 | 来源:发表于2021-04-09 11:09 被阅读0次
image.png
image.png
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #f5f5f5;
}

/*定义滚动条的轨道,内阴影及圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 10px rgba(224, 222, 222, 0);
    border-radius: 10px;
    background-color: #f5f5f5;
}

/*定义滑块,内阴影及圆角*/
::-webkit-scrollbar-thumb {
    /*width: 10px;*/
    height: 30px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(170, 170, 170, 0.781);
    background-color: rgba(170, 170, 170, 0.103);
}

相关文章

  • 一个简单的浏览器滚轮样式

  • 鼠标滚轮事件

    使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题其中火狐浏览器事件为:"DOMMousescrol...

  • js基础总结(三)

    滚轮事件包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseSc...

  • 初识CSS样式引入&层叠&继承

    引入样式的方式: 元素内嵌样式 文档内嵌样式 外部引用样式 层叠和继承: 浏览器样式 样式表层叠优先级: 浏览器样...

  • CSS解决select默认下拉样式

    select默认样式在各个浏览器样式不一致,同时也不美观,对于这种小的样式,我觉得用CSS解决更加方便简单,下面将...

  • 滚动条设置 兼容chrome和ie

    滚动条设置 chrome css 样式设置 ie 浏览器样式 火狐浏览器目前没有找到兼容的样式

  • CSS中样式的优先级

    层叠样式类型 类型浏览器默认样式浏览器用户自定义样式外部样式表内部样式表内联样式表 样式顺序 样式表内部选择器 S...

  • 键盘事件 与 鼠标滚轮事件

    鼠标滚轮事件,需要适配不同浏览器 火狐 DOMMouseScroll进行事件监听 其他 onmousewheel ...

  • CSS浏览器前缀

    浏览器样式前缀 为了让CSS3样式兼容,需要将某些样式加上浏览器前缀: -ms- 兼容IE浏览器 -moz- 兼容...

  • 页面架构 1-3

    1. CSS Reset 浏览器对标签进行样式设置,不同浏览器默认样式有差异 CSS Reset 全局定义样式,通...

网友评论

      本文标题:一个简单的浏览器滚轮样式

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