首页 前端知识 谷歌、火狐、ie浏览器更改滚动条样式

谷歌、火狐、ie浏览器更改滚动条样式

2024-06-20 09:06:55 前端知识 前端哥 158 34 我要收藏

一、谷歌:

1、全局修改,所有滚动条生效:

 // 滚动条整体样式
::-webkit-scrollbar {
    width: 10px;   // 高宽分别对应横竖滚动条的尺寸
    height: 1px;
}
// 滚动条里面小方块
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #E5E5E5;
}
// 滚动条里面轨道
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ffffff;
}
// 滚动条上下的箭头按钮
::-webkit-scrollbar-button {
    display: none;
}

2、针对某个容器修改:

 // 滚动条整体样式
div::-webkit-scrollbar {
    width: 10px;   // 高宽分别对应横竖滚动条的尺寸
    height: 1px;
}
// 滚动条里面小方块
div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #E5E5E5;
}
// 滚动条里面轨道
div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ffffff;
}
// 滚动条上下的箭头按钮
div::-webkit-scrollbar-button {
    display: none;
}

3、隐藏滚动条:

::-webkit-scrollbar {
    display: none;  
    width: 0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}

二、火狐:

1、火狐滚动条样式通过scrollbar-color和scrollbar-width两个属性控制:

// 表示div这个容器的滚动条样式,可以换成其他的选择器
div {
    scrollbar-color: #F15A29 #ffffff;
    scrollbar-width: auto;
}

2、隐藏滚动条:

scrollbar-width: none;

三、ie:

// 表示div这个容器的滚动条样式,可以换成其他的选择器
div {
    scrollbar-face-color: #F15A29;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13002.html
标签
chromefirefox
评论
发布的文章

vue3生成聊天对话框功能

2024-07-10 18:07:36

json基本格式

2024-07-08 09:07:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!