css如何去掉或修改浏览器默认滚动条

去掉浏览器默认滚定条

很简单，只需在出现滚动条的元素加-webkit-scrollbar属性即可，代码如下：

     /* .box为当前出现滚动条的容器 */.box::-webkit-scrollbar {display: none}

如果想改变它的样式：

 /*滚动条的宽度*/
.ant-drawer-wrapper-body::-webkit-scrollbar {width: 4px;height: 105px;
}/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
.ant-drawer-wrapper-body::-webkit-scrollbar-track {width: 4px;height: 80%;background-color: #E0E6F3;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;
}/*滚动条的设置*/
.ant-drawer-wrapper-body::-webkit-scrollbar-thumb {background-color: #A4A9C1;background-clip: padding-box;min-height: 28px;max-height: 105px;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;/* display: none; */
}/*滚动条移上去的背景*//* .ant-drawer-wrapper-body::-webkit-scrollbar-thumb:hover {background-color: #fff;
} */

还有一种(效果在代码下方)：

::-webkit-scrollbar {width: 5px; height: 10%
}::-webkit-scrollbar-track {background-color: #f1f1f1;  border-radius: 10px;} /* 滚动条的滑轨背景颜色 */::-webkit-scrollbar-thumb {background-color: #A4A9C1;border-radius: 10px;
}

效果：

css如何去掉或修改浏览器默认滚动条相关推荐

修改浏览器默认滚动条样式，兼容IE和谷歌
在项目中,很经常会需要修改浏览器滚动条的默认样式,因为浏览器本身的滚动条可能和设计师设计的页面很不搭配,话不多说上代码我饿 1.谷歌浏览器写法,webkit内核浏览器 ::-webkit-scroll ...
css解决谷歌，360浏览器默认最小字体为12px问题
css解决谷歌,360浏览器默认最小字体为12px问题参考文章: (1)css解决谷歌,360浏览器默认最小字体为12px问题 (2)https://www.cnblogs.com/wenzhesh ...
html怎样去掉li前面的小圆圈,css怎么去掉li前的默认点？
有时候写导航li前面带个黑色的点,很烦人,如何去掉li前面的默认点?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么去掉li前的默认点? 给li ...
将B/S程序打包成exe，C#对外提供http接口，CefSharp 修改浏览器默认白色背景
简介公司有个项目,需要将我们https的B/S程序集成到的http的B/S程序中,还要保持本身功能完整,由于https程序中需要调用电脑的麦克风和摄像头,这就难受了.最后商量决定将https程序制作 ...
修改ElementUI默认滚动条的样式
一.默认的滚动条很宽很占地方,不美观,与页面设计格格不入. 二.优化后的滚动条很美观,可以根据实际风格调整颜色,宽度,高度等. 三.优化代码在全局样式里加入以下代码,或者在需要使用的地方单独引入 ...
【css】改变浏览器默认滚动条样式
这个网上很多的教程,我就不多哔哔了,直接贴代码,方便自己和大家使用. 可以把下面的代码放到一个css中,然后全局引入就可以了. /* 整个滚动条 */ ::-webkit-scrollbar {wid ...
修改浏览器默认的滚动条样式
/*滚动条 start*/::-webkit-scrollbar {width: 10px;height: 4px;background-color: #F5F5F5;}/*定义滚动条轨道内阴影+圆 ...
移动端苹果浏览器默认滚动条bug处理（橡皮糖现象）亲测有效
START 番茄大半夜不睡觉又来写点啥了. 最近遇到苹果浏览器的展示bug,百度到有人说这是橡皮泥效果. 简单的概括呢,就是一个html页面,本身是没有滚动条的,在安卓,pc上都是正常显示的,但是呢, ...
Android 修改浏览器默认主页及书签
修改是基于mtk Android方案自带的浏览器. 主页在BrowserSettings.java构造函数中会启动一个handler来初始化homepage等: BackgroundHandler. ...

css如何去掉或修改浏览器默认滚动条

去掉浏览器默认滚定条

很简单，只需在出现滚动条的元素加-webkit-scrollbar属性即可，代码如下：

如果想改变它的样式：

还有一种(效果在代码下方)：

效果：

css如何去掉或修改浏览器默认滚动条相关推荐

最新文章

热门文章