滚动条全局样式修改与局部修改

全局的样式代码：

  ::-webkit-scrollbar {width: 10px;height: 10px;}/* 滚动条的滑块 */::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 3px;}

　局部的样式修改（可以是div）：

.div-class::-webkit-scrollbar {width: 10px;height: 10px;}/* 滚动条的滑块 */.div-class ::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 3px;}

　　效果：

假如不想要滚动条，那么宽高设置为0就好了：

  ::-webkit-scrollbar {width: 0px;height: 0px;}/* 滚动条的滑块 */::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 3px;}

扩展下其他的：

滚动条全局样式：
// 滚动条设置
::-webkit-scrollbar {width: 10px;//y轴上的滚动条宽度height: 10px;//x轴上滚动条高度
}
::-webkit-scrollbar-track {border-radius: 3px; /*滚动条的背景区域的圆角*/background-color: #fdf8f5; /*滚动条的背景颜色*/
}
::-webkit-scrollbar-thumb {border-radius: 3px; /*滚动条的圆角*/background-color: #ccc; /*滚动条的背景颜色*/
}::-webkit-scrollbar-thumb:hover {background-color: rgb(46, 86, 159);
}::-webkit-scrollbar-thumb:active {background-color: rgb(46, 86, 159);cursor: pointer;
}

转载于:https://www.cnblogs.com/sweeeper/p/11277282.html

滚动条全局样式修改与局部修改相关推荐

git--修改用户名和邮箱的方法（全局修改和局部修改）
原文网址:git--修改用户名和邮箱的方法(全局修改和局部修改)_IT利刃出鞘的博客-CSDN博客简介本文介绍如何修改git的用户名和邮箱,包括:如何全局修改用户名和邮箱,如何只修改某个项目的用户 ...
【方法篇·壹】css开发技巧-全局样式设置和局部样式
目录前言: 1.全局样式和局部样式设置 2.提升效率重要方法 3.提升效率重要方法-集中处理UI样式 4.提升效率重要方法-学会复制 5. 提升质量方法-flex.百分比.rem布局 6.解决疑难杂 ...
fduthesis使用问题： Overleaf 生僻字处理——整体和局部修改字体（个别中文字符显示问题）
fduthesis使用问题: Overleaf 生僻字处理--整体和局部修改字体(个别中文字符显示问题) 问题说明问题发现探索解决走上弯路回归正道--整体修改字体局部修改字体附 fduth ...
修改ElementUI默认滚动条的样式
一.默认的滚动条很宽很占地方,不美观,与页面设计格格不入. 二.优化后的滚动条很美观,可以根据实际风格调整颜色,宽度,高度等. 三.优化代码在全局样式里加入以下代码,或者在需要使用的地方单独引入 ...
全局样式_CAD新手福利：不懂标注样式修改的请进来一看
在CAD中,尺寸标注是必不可少的. 因此关于尺寸标注的样式修改,也相对来说比较"杂",因为有些时候,尺寸线和尺寸界限都会有一定的要求. 今天,分享一些尺寸标注中关于尺寸线和尺寸界限 ...
php怎么修改滑动条,修改滚动条样式的方法
这次给大家带来修改滚动条样式的方法,修改滚动条样式的注意事项有哪些,下面就是实战案例,一起来看一下. 支持360极速 chrome firfox 不支持ie9/*滚动条样式*/::-webkit-sc ...
CSS系列之修改滚动条的样式
文章の目录参考写在最后默认滚动条样式如下: 那如何修改呢?如下代码: /*滚动条样式*/textarea::-webkit-scrollbar {width: 4px; }textarea::- ...
修改 div 的滚动条的样式
修改 div 的滚动条的样式需要用到浏览器专属的伪元素,没有万能的办法,支持的浏览器不是很多. 假设有一个(你已经)设好宽高.定好位的 div, <div class="group- ...
html5的修改滚动条滑块样式,前端项目修改默认滚动条样式
前端项目修改默认滚动条样式写过挺多项目都需要改变滚动条的默认样式并不想单独下载和引入插件因此纯css修改默认滚动条的样式这次算统一整理下方法,直接上代码. &::-webkit-scr ...

滚动条全局样式修改与局部修改

滚动条全局样式修改与局部修改相关推荐

最新文章

热门文章