前端CSS 设置滚动条样式 ::-webkit-scrollbar

布满荆棘的人生 2022-12-18 07:59 156阅读 0赞

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

> ::-webkit-scrollbar **仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用**.

> 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

> ::-webkit-scrollbar — 整个滚动条.  
> ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).  
> ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.  
> ::-webkit-scrollbar-track — 滚动条轨道.  
> ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.  
> ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.  
> ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

::-webkit-scrollbar { 
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    ::-webkit-scrollbar-thumb { 
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        border-radius: 10px;
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
        transition: 0.3s ease-in-out;
    }
    ::-webkit-scrollbar-track { 
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关滚动条css样式

<style lang="scss"> ::-webkit-scrollbar-track { background: rgba(0, 0, 0,

小灰灰/ 2023年02月11日 08:46/ 0 赞/ 36 阅读

相关 css：设置滚动条样式&高度自适应

一、如何出现滚动条在样式中添加 overflow-y: scroll; 二、修改滚动条样式 2.1、首先在标签中定义一个class名 <d

向右看齐/ 2023年01月22日 04:59/ 0 赞/ 21 阅读

相关 css修改滚动条样式

HTML代码： <div class="element"> 内容 </div> CSS代码： .element{ over

今天药忘吃喽~/ 2023年01月01日 01:41/ 0 赞/ 250 阅读

相关 css设置滚动条样式

css设置滚动条样式先看效果图 ![70][] 附上效果图代码： 1. `1.style部分` 2. `<style>` 3. `/定义

约定不等于承诺〃/ 2022年12月28日 08:00/ 0 赞/ 191 阅读

相关前端CSS 设置滚动条样式 ::-webkit-scrollbar

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 > ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷

布满荆棘的人生/ 2022年12月18日 07:59/ 0 赞/ 157 阅读

相关 CSS_如何设置滚动条样式_超出左右滚动

CSS-界面滚动时不显示滚动条设置滚动条的样式： div::-webkit-scrollbar { //width: 0; heig

矫情吗；*/ 2022年11月26日 01:57/ 0 赞/ 352 阅读

相关 CSS之设置滚动条样式

[https://www.cnblogs.com/moqiutao/p/4783526.html][https_www.cnblogs.com_moqiutao_p_47835

红太狼/ 2022年11月07日 13:22/ 0 赞/ 20 阅读

相关滚动条样式css

![在这里插入图片描述][20190702143854151.png] / 滚动条 / ::-webkit-scrollbar { width:

深藏阁楼爱情的钟/ 2021年12月18日 13:37/ 0 赞/ 445 阅读

相关 css 设置overflow:scroll 滚动条的样式

css 设置overflow:scroll 滚动条的样式 / 定义滚动条样式 / ::-webkit-scrollbar { width: 6px

蔚落/ 2021年11月15日 13:16/ 0 赞/ 424 阅读

相关 css 定义滚动条样式

在使用了overflow产生滚动条的选择器里,只对谷歌浏览器有效选择器::-webkit-scrollbar 滚动条整体部分设置dis

小灰灰/ 2021年07月25日 02:54/ 0 赞/ 600 阅读