飞码网-免费源码博客分享网站

点击这里给我发消息

如何使用CSS设置滚动条|-CSS教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

介绍

2018年9月,W3C CSS Scrollbars定义了用CSS定制滚动条外观的规范。截至2020年,96%的互联网用户都在运行支持CSS滚动条样式的浏览器。然而,您需要编写两套CSS规则,以覆盖Blink和WebKit以及Firefox浏览器。
在本教程中,你将学习如何使用CSS自定义滚动条以支持现代浏览器。

下面是一个使用::-webkit-scrollbar、::-webkit-scrollbar-track和::webkit-scrollbar-thumb伪元素的例子。
body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}
下面是使用这些CSS规则生成的滚动条的截图。
Screenshot of an example webpage with a customized scrollbar with a blue scrollbar on an orange track.
这段代码可以在最新版本的Chrome、Edge和Safari中使用。不幸的是,这个规范已经被W3C正式放弃,并且很可能随着时间的推移而被废弃。

在Firefox中设计滚动条的样式

目前,Firefox的滚动条可以通过新的CSS Scrollbars来实现。
下面是一个使用滚动条宽度和滚动条颜色属性的例子。
body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}
下面是使用这些CSS规则生成的滚动条的截图。
Screenshot of an example webpage with a customized scrollbar with a blue scrollbar on an orange track.
该规范与-webkit-scrollbar规范在控制滚动条的颜色方面有一些共同之处。然而,目前还不支持修改 "拇指轨迹 "的填充和圆度。

构建面向未来的滚动条样式

你可以用支持-webkit-scrollbar和CSS Scrollbars规范的方式来编写CSS。
下面是一个使用滚动条宽度、滚动条颜色、::-webkit-scrollbar、::-webkit-scrollbar-track、::webkit-scrollbar-thumb的例子。
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}
Blink和WebKit浏览器将忽略它们不识别的规则,并应用-webkit-scrollbar规则。Firefox浏览器将忽略它们不认可的规则,并应用CSS Scrollbars规则。一旦Blink和WebKit浏览器完全放弃了-webkit-scrollbar规范,它们将重新回到新的CSS Scrollbars规范。

Blink和WebKit浏览器将忽略它们不识别的规则,并应用-webkit-scrollbar规则。Firefox浏览器将忽略它们不认可的规则,并应用CSS Scrollbars规则。一旦Blink和WebKit浏览器完全放弃了-webkit-scrollbar规范,它们将重新回到新的CSS Scrollbars规范。

总结

在这篇文章中,我们向你介绍了如何使用CSS来设计滚动条的样式,以及如何确保这些样式在大多数现代浏览器中被识别。

也可以通过隐藏默认的滚动条和使用JavaScript来检测高度和滚动位置来模拟滚动条。然而,这些方法在重现惯性滚动等体验方面存在局限性(例如,通过触控板滚动时的运动衰减)。



 
飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()
内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: