css自定义滚动条样式

数字码影先锋
• 阅读 686

css控制滚动条宽度和颜色

::-webkit-scrollbar {
        width: 7px;
        height: 7px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    width: 4px;
    border-radius: 5px;
    background-color: #5e5e6a;
}

::-webkit-scrollbar-track:hover {
    background-color: transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #5e5e6a;
}

::-webkit-scrollbar-thumb:active {
    background-color: #5e5e6a;
}

指定某个div.custom的滚动条样式 前端加相应的选择器即可

div.custom::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
点赞
收藏
评论区
推荐文章
菜园前端 菜园前端
2年前
什么是 CSS?
原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来
Stella981 Stella981
3年前
Less功能特性
(1)变量   我们常常在CSS中看到同一个值重复多次,这样难易于代码维护constbgColor"skyblue";$(".postcontent").css("backgroundcolor",bgColor);$("wrap").css("backgroundcolor",bgColor);
Wesley13 Wesley13
3年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Stella981 Stella981
3年前
HTML5+CSS+JQuery 实现简单的进度条功能
样式:<styletype"text/css".processcontainer2{width:450px;border:1pxsolid6C9C2C;height:25px;borderradius
Stella981 Stella981
3年前
20180908_html_林芳钰
<!DOCTYPEhtml<html<head<metacharset"UTF8"<title180908作业</title<styletype"text/css"  .up{     width:1365px;     height:98px;  }  .line
Wesley13 Wesley13
3年前
CSS定位和滚动条
0805自我总结一.绝对定位position:absolute;/绝对定位:1、定位属性值:absolute2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)3、一旦定位后,定位的布局方位top、bottom、left、right都能参与布局
Wesley13 Wesley13
3年前
CSS3的基础知识学习(二)
前言:CSS主要是用来修饰标签的样式、使得网页更加美观,其实css的引用有三种方式,但主要是使用链接引用,意思就是我们写一个.css的文件,将样式修饰的控制代码写在这里面,这样控制起来方便快捷。对于CSS的学习,知识点中最重要的部分就是属性和选择器,其次还有页面布局和盒子模型,下面进行学习以及代码效果演示。一、CSS的三种引入
Wesley13 Wesley13
3年前
CSS背景颜色、背景图片、平铺、定位、固定
CSS背景颜色设置backgroundcolor:red;如设置背景颜色为红色;背景颜色设置支持3种写法:颜色名16进制rgbCSS背景图片颜色设置backgroundimage:url(图片地址);如设置背景图片路径不在说明了!CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat)b
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
3年前
CSS基础知识整理
1什么是CSS?CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
taskbuilder taskbuilder
7个月前
TaskBuilder前端页面CSS样式规则设置
在前端页面设计器内,点击底部的“CSS样式”选项卡,可以打开CSS样式设计器,在此查看和设计当前页面的CSS样式规则,如下图所示:3.3.6.1引入外部样式文件如果要在页面中引入外部CSS文件,可以点击CSS样式设计器左上角“外部样式文件”栏右边的加号按钮