CSS滚动条样式修改

CSS滚动条样式修改敬请各位看官多多斧正。就是想到一种思路,分享出来,没别的意思,我自认为天资一般,所以诸位师兄中必有武功高强,天资聪慧者,望轻拍砖

css3可以自定义滚动条样式,今天发现了一个花式玩法,一起看看? 之前写过网页时滚动条时是不是都这个样子的呢 CSS滚动条样式修改 这个滚动条好看么?

CSS滚动条样式修改 废话肯定不好看! 如果设计湿给个带背景的设计图,又当如何呢?

CSS滚动条样式修改 CSS滚动条样式修改 是不是更丑了!

CSS滚动条样式修改 前方高能登场!非战斗人员请火速避开!

CSS滚动条样式修改 CSS滚动条样式修改

CSS滚动条样式修改 请注意第二张图并非滚动条不见了,是设置了与背景色同色,(是不是多此一举了,用户体验去哪了!)

CSS滚动条样式修改 是不是美观了不少?

css代码奉上

body {
  background: #06b0b9;
}
::-webkit-scrollbar {
        width: 10px;
        height: 1px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: none;
  background: hsl(183, 97%, 27%);
  -webkit-box-shadow: none;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  border-radius: 10px;
  background: #06b0b9;
  -webkit-box-shadow: none;
}

CSS滚动条样式修改

查了一下兼容表,兼容性我不说啥了(谷谷大佬)(这个表我都想删了)

更,,,

看官提示,火狐IE不行,亲测火狐确实不行,那丫的不支持,

CSS滚动条样式修改 不过ie支持别的方法实现,不过略显不完美

 body {
  scrollbar-arrow-color: #06b0b9;
  /*三角箭头的颜色*/
  scrollbar-face-color: hsl(183, 97%, 27%);
  /*立体滚动条的颜色(包括箭头部分的背景色)*/
  scrollbar-3dlight-color: #06b0b9;
  /*立体滚动条亮边的颜色*/
  scrollbar-highlight-color: #06b0b9;
  /*滚动条的高亮颜色(左阴影?)*/
  scrollbar-shadow-color: #06b0b9;
  /*立体滚动条阴影的颜色*/
  scrollbar-darkshadow-color: #06b0b9;
  /*立体滚动条外阴影的颜色*/
  scrollbar-track-color: #06b0b9;
  /*立体滚动条背景颜色*/
  scrollbar-base-color: #06b0b9;
  /*滚动条的基色*/
}

CSS滚动条样式修改 不过只有今天还有个发现,似乎可以实现全屏背景图

CSS滚动条样式修改 正常情况下这个样子

CSS滚动条样式修改 别光顾着看人,看右边,这能能满足么?

CSS滚动条样式修改

昨天情人节都怎么过的啊,朋友圈似乎一片和谐

CSS滚动条样式修改 回归正题 CSS滚动条样式修改 这样是不是好了不少?(月饼一只,玄机不会找我要版权吧?)

CSS滚动条样式修改

body,
html {
  width: 100vw;
}

body {
  /* background: #06b0b9; */
  background: url(01.jpg) no-repeat center;
  background-size: 100% 100%;
}

::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: hsl(183, 97%, 27%);
  -webkit-box-shadow: none;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
}

敬请各位看官多多斧正。就是想到一种思路,分享出来,没别的意思,我自认为天资一般,所以诸位师兄中必有武功高强,天资聪慧者,望轻拍砖

CSS滚动条样式修改

CSS滚动条样式修改

今天的文章CSS滚动条样式修改分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/14533.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注