css拖动样式_如何用CSS修改浏览器滚动条的样式(实例详解)

margin:100pxauto;

border: 1pxsolid#000;

width: 200px;

height: 300px;

overflow: auto;

}

.scroll::-webkit-scrollbar {

width: 10px;

height: 10px;

}

/*正常情况下滑块的样式*/

.scroll::-webkit-scrollbar-thumb {

background-color: rgba(0,0,0,.05);

border-radius: 10px;

-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

}

/*⿏标悬浮在该类指向的控件上时滑块的样式*/

.scroll:hover::-webkit-scrollbar-thumb {

background-color: rgba(0,0,0,.2);

border-radius: 10px;

-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

}

/*⿏标悬浮在滑块上时滑块的样式*/

.scroll::-webkit-scrollbar-thumb:hover {

background-color: rgba(0,0,0,.4);

-webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);

}

/*正常时候的主⼲部分*/

.scroll::-webkit-scrollbar-track {

border-radius: 10px;

-webkit-box-shadow: inset006pxrgba(0,0,0,0);

background-color: white;

}

/*⿏标悬浮在滚动条上的主⼲部分*/

.scroll::-webkit-scrollbar-track:hover {

-webkit-box-shadow: inset006pxrgba(0,0,0,.4);

background-color: rgba(0,0,0,.01);

}效果图：注意：如果是⽔平滚动条，那么width属性不起作⽤，height可以设置滚动条的⾼度；如果是竖直滚动条，那么height⾼度不起作注意⽤，width可以⽤来设置滚动条的宽度。在⼯作中可以根据需要设置想要的样式，没有接触过得⼩伙伴可以多去尝试，加深对知识点的理解，希望可以帮助到你！以上就是如何⽤CSS修改浏览器滚动条的样式（实例详解）的详细内容，更多请关注我

2023年6月20日发(作者：)

css拖动样式_如何⽤CSS修改浏览器滚动条的样式（实例详解）随着互联⽹的发展，⼈们对页⾯的要求越来越⾼，不只是功能好⽤，⽽且还要颜值⾼。前端开发⼈员对于浏览器的滚动条并不陌⽣，当⾃带的⼀些滚动条⽆法满⾜我们的审美时，你知道如何⽤CSS修改浏览器滚动条的样式如何⽤CSS修改浏览器滚动条的样式吗？今天就给⼤家介绍如何设置div滚动条样式如何设置div滚动条样式。有需要的⼩伙伴可以参考⼀下。我们在⾃定义滚动条样式⾃定义滚动条样式前，⾸先要了解滚动条的结构。通俗来讲，滚动条由两部分组成：⼀部分是可以滑动的部分，我们称它为滑块；另⼀部分是滚动条的轨道，也就是滑块的轨道，⼀般来说，为了美观，滑块的颜⾊要⽐轨道的颜⾊深⼀些。程序猿的⽣活：打造全⽹web前端全栈资料库（总⽬录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）⾸先介绍滚动条相关的CSS代码，以及他们的含义 ::-webkit-scrollbar：指滚动条整体部分，它的属性有width,height,background等

::-webkit-scrollbar-button ： 指滚动条两边的按钮。当不需要时可以⽤display:none将其隐藏

::-webkit-scrollbar-track ：指外层轨道部分，当不需要时可以⽤display:none将其隐藏，也可以添加你想要的颜⾊

::-webkit-scrollbar-track-piece ：指内层轨道部分，即滚动条中间的部分

::-webkit-scrollbar-thumb ： 指滚动条⾥⾯可以拖动的部分，也就是滑块

::-webkit-scrollbar-corner ：指边⾓部分

::-webkit-resizer ：他⽤来定义右下⾓滑块的样式但是最常⽤的是滚动条整体部分（-webkit-scrollbar），滑块（-webkit-scrollbar-thumb）以及外轨道（ -webkit-scrollbar-track）三部分。接下来我们将div盒⼦⾥⾯超出的部分隐藏，给div设置滚动条样式，看看怎么⽤CSS实现滚动条样式。HTML部分：

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day

have a nice day