前端css自定义滚动条样式背景颜色箭头等修改(图片加源码) |
您所在的位置：网站首页 › 滚动图标怎么设置 › 前端css自定义滚动条样式背景颜色箭头等修改(图片加源码) |
前端css自定义滚动条样式背景颜色箭头等修改(图片加源码)
|
目录
知识点可参考另一篇：注意事项：源码如下：效果图如下：
知识点可参考另一篇：
知识点不足，可点击跳转下一篇: CSS3自定义滚动条样式 注意事项：下面代码不兼容ie,和Firefox浏览器 源码如下：不需要的可以注释掉，反之亦然，箭头分为上下左右，因为横向压缩，浏览器下面也会出现横向滚动条 下面这小段代码是右下角样式代码补充一下，效果没更换: /* 这个是后加的!!!下面效果图没有更换,右下角背景颜色 */ ::-webkit-scrollbar-corner { background-color: #000D16; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 20px; border-radius: 2px; opacity: 0.5; background-color: #000D16; border: 1px solid #162E8B; } /*定义滚动条轨道 内阴影+圆角*/ /* ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #000D16; border-left: 1px solid #4A7EF2; border-right: 1px solid #4A7EF2; } */ /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { /* position: absolute; width: 12px; height: 96px; */ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); -webkit-border-radius: 6px; -moz-border-radius: 6px; background: #162E8B; } /* 这是总的上下左右四个箭头，需要宽度设置0，高度设置0，不然有默认按钮高度 */ ::-webkit-scrollbar-button { width: 0px; height: 0px; /* display: block; */ } /* 上面箭头 */ ::-webkit-scrollbar-button:vertical:single-button:start { /* border: 1px solid red; */ width: 20px; height: 15px; /* 3px 5px 移动图片位置 */ background: url("./images/scrollbarTop.png") 3px 5px no-repeat; background-size: 12px 6px; cursor: pointer; background-color: #000D16; border-left: 1px solid #162E8B; border-right: 1px solid #162E8B; border-top: 1px solid #162E8B; } /* 下面箭头 */ ::-webkit-scrollbar-button:vertical:single-button:end { /* border: 1px solid red; */ width: 20px; height: 15px; background: url("./images/scrollbarBtn.png") 3px no-repeat; background-size: 12px 6px; cursor: pointer; background-color: #000D16; border-left: 1px solid #162E8B; border-right: 1px solid #162E8B; border-bottom: 1px solid #162E8B; } /* 最低下面左边 */ ::-webkit-scrollbar-button:horizontal:single-button:start { /* border: 1px solid red; */ width: 20px; height: 15px; background: url("./images/scrollLeft.png") 5px no-repeat; background-size: 9px 10px; cursor: pointer; background-color: #000D16; border-left: 1px solid #162E8B; border-top: 1px solid #162E8B; border-bottom: 1px solid #162E8B; } /* 最低下面右边 */ ::-webkit-scrollbar-button:horizontal:single-button:end { /* border: 1px solid red; */ width: 20px; height: 15px; background: url("./images/scrollRight.png") 5px no-repeat; background-size: 9px 10px; cursor: pointer; background-color: #000D16; border-right: 1px solid #162E8B; border-top: 1px solid #162E8B; border-bottom: 1px solid #162E8B; } /* 这个是后加的!!!下面效果图没有更换,右下角背景颜色 */ ::-webkit-scrollbar-corner { background-color: #000D16; } 效果图如下：
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！ |
【本文地址】
今日新闻 |
推荐新闻 |