css滚动条（css不显示滚动条但可以滚动）

Css滚动条(css不显示滚动条，但可以滚动)

CSS滚动条样式教程-如何 *** 自定义滚动条

2021-05-05 10: 06: 22徐师兄，你有没有访问过带有自定义滚动条的网站，想知道他们是怎么做到的？

在本教程中，您将:

了解可用于在浏览器中设置滚动条样式的原生CSS属性。

使用CSS创建四个独特的滚动条

了解一些为自定义滚动条提供跨浏览器支持的外部库。

自定义滚动条的优点和缺点

在进入代码之前，我认为值得为网站或应用程序创建自定义滚动条，以带来一些潜在的妥协。

好处是，它可以让你的网站与数百万使用浏览器默认滚动条的网站相比，鹤立鸡群。任何能让你的网站更容易被访问者记住的东西都会让你受益很久。

另一方面，许多UI设计者认为你不应该干涉“标准化”的UI组件，比如滚动条。如果你过多地修改滚动条，可能会让使用你的网站或应用程序的人感到困惑。

如果你这么做是为了你的个人网站，你可能不用担心，只要你喜欢它的外观。

另一方面，如果你想在工作中或者想赚钱的项目中实现自定义滚动条，你应该尝试A/B测试，根据结果做出基于数据的决策。

在一天结束的时候，我们中的大多数人都在编写代码来增加业务收入，所以你总是需要记住这一点。

初级课程

您需要做的之一件事是创建一个基本布局，以便页面足够大，能够在Web浏览器中实际显示滚动条:

DocumentCSS scrollbar定制"Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiu *** odtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."" Loremipsumdolorsitamet，consecteturadipiscingelit，seddoeiu *** odtemporarincididuntlaboreetdoloremagnaliqua。Utenimadminimveniam，quisnostrudexercitationullamcola Boris inisiutaliquipexeacommodoconsequet。duisateirudorolinreprehderitin volutatevelitessecillumdoloreeufugiatnullapa riatur。excepeursintocacatcupidatatnonproident，suntincupaquiofficialsuntmollitanimidestlaborum。”"Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiu *** odtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."" Loremipsumdolorsitamet，consecteturadipiscingelit，seddoeiu *** odtemporarincididuntlaboreetdoloremagnaliqua。Utenimadminimveniam，quisnostrudexercitationullamcola Boris inisiutaliquipexeacommodoconsequet。duisateirudorolinreprehderitin volutatevelitessecillumdoloreeufugiatnullapa riatur。excepeursintocacatcupidatatnonproident，suntincupaquiofficialsuntmollitanimidestlaborum。”"Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiu *** odtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."" Loremipsumdolorsitamet，consecteturadipiscingelit，seddoeiu *** odtemporarincididuntlaboreetdoloremagnaliqua。Utenimadminimveniam，quisnostrudexercitationullamcola Boris inisiutaliquipexeacommodoconsequet。duisateirudorolinreprehderitin volutatevelitessecillumdoloreeufugiatnullapa riatur。excepeursintocacatcupidatatnonproident，suntincupaquiofficialsuntmollitanimidestlaborum。”"Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiu *** odtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."" Loremipsumdolorsitamet，consecteturadipiscingelit，seddoeiu *** odtemporarincididuntlaboreetdoloremagnaliqua。Utenimadminimveniam，quisnostrudexercitationullamcola Boris inisiutaliquipexeacommodoconsequet。duisateirudorolinreprehderitin volutatevelitessecillumdoloreeufugiatnullapa riatur。excepeursintocacatcupidatatnonproident，suntincupaquiofficialsuntmollitanimidestlaborum。”"Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiu *** odtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."" Loremipsumdolorsitamet，consecteturadipiscingelit，seddoeiu *** odtemporarincididuntlaboreetdoloremagnaliqua。Utenimadminimveniam，quisnostrudexercitationullamcola Boris inisiutaliquipexeacommodoconsequet。duisateirudorolinreprehderitin volutatevelitessecillumdoloreeufugiatnullapa riatur。excepeursintocacatcupidatatnonproident，suntincupaquiofficialsuntmollitanimidestlaborum。”

这里没有什么要考虑的，只是一个基本的div容器和一个用于我们布局的类名容器，一个标题和一堆用类名para填充页面的段落。

CSS让事情看起来更奇怪:

body{font-family:Arial,Helvetica,sans-serif;margin:0;}.para{font-size:16px;padding:20px;width:70%;}.container{display:flex;flex-direction:column;justify-content:center;align-items:center;}

如何用CSS创建自定义滚动条

通过我们的设置，我们可以跳到教程中有趣的部分。本部分的之一部分将学习各种可用于样式设置的CSS属性。

在第二部分中，我们将实现四种不同类型的滚动条，为您提供一些关于 *** 自己的滚动条的想法。

CSS属性可以用来设置滚动条的样式。

不幸的是，我们仍然没有任何对CSS样式滚动条的标准化跨浏览器支持。基于Firefox和Webkit的浏览器(如Chrome、Edge和Safari)有不同的风格属性。

本教程将重点介绍Webkit浏览器，因为它们提供了更多的样式设置选项，但我们也将简要介绍Firefox。

滚动条的Webkit CSS样式属性

::-WebKit-scroll bar-整个滚动条

::-WebKit-scroll bar-track-滚动条的整个进度条区域。

::-WebKit-scroll bar-thumb-滚动条的可拖动部分

下列属性可用，但不常用:

::-WebKit-scroll bar-button-滚动条两端的向上/向下按钮

::-WebKit-scroll bar-track-piece-滚动条中未被滚动块覆盖的部分。

::-WebKit-scroll bar-corner-水平和垂直滚动条相交的底角。

滚动条的Firefox CSS样式属性

目前有两个CSS属性可以用来设置Firefox中滚动条的样式。

scroll bar-width-控制滚动条的宽度，只有两个选项是auto或thin。

scroll bar-color-接受两种颜色，这两种颜色用于按顺序给滑块和滚动条着色。

现在你已经知道了自定义滚动条的选项，我们将通过一些例子把它们付诸实践。

深色主题滚动条

黑暗主题网站现在风靡一时。坚持默认的浏览器滚动条可能会惹恼用户，因为它不适合黑暗主题的网站。

让我们用CSS的新知识来创建一个黑色主题的滚动条。滚动条的框架灵感来自CSS Tricks网站:

html::-webkit-scrollbar{width:20px;}html::-webkit-scrollbar-track{background-color:black;}html::-webkit-scrollbar-thumb{background:#4e4e4e;border-radius:25px;}

极简滚动条

对于这个例子，你将 *** 一个简单的滚动条。如果你想给网站提供一个简洁优雅的风格，这种类型的滚动条会非常有用。

需要注意的最重要的一点是，您可以通过在CSS中使用hover和active伪元素来进一步设计滚动条的样式。在这种情况下，当您悬停鼠标并拖动拇指时，滚动条将变成深灰色。

html::-webkit-scrollbar{width:10px;}html::-webkit-scrollbar-track{background:rgb(179,177,177);border-radius:10px;}html::-webkit-scrollbar-thumb{background:rgb(136,136,136);border-radius:10px;}html::-webkit-scrollbar-thumb:hover{background:rgb(100,100,100);border-radius:10px;}html::-webkit-scrollbar-thumb:active{background:rgb(68,68,68);border-radius:10px;}

图案滚动条

在这一节中，重点是用重复的线性渐变在滚动条轨道上创建一个图案效果。滚动条的拇指也可以做同样的事情。

另一个需要注意的是，你可以使用边框来设计滚动条的样式，你可以用它来创建许多很酷的效果。在这种情况下，我将thumb的背景颜色设置为透明，以便您可以在滚动时看到滚动条的轨迹样式。

html::-webkit-scrollbar{width:20px;}html::-webkit-scrollbar-track{background-image:repeating-linear-gradient(45deg,red0,red1px,transparent0,transparent50%);background-size:10px10px;}html::-webkit-scrollbar-thumb{background:transparent;border-radius:5px;border:2pxsolidblack;box-shadow:inset1px1px5pxblack;}

动画渐变滚动条

这个例子使用了线性渐变和阴影技术，当你上下移动页面时，滚动条看起来会改变颜色。真正发生的是滚动条轨道的背景正在显示在拇指下面。

它之所以有效，是因为阴影框占据了滚动条的所有空空间(除了缩略图所在的位置)。因为缩略图是透明的，所以会显示背景的渐变颜色。

html::-webkit-scrollbar{width:20px;}html::-webkit-scrollbar-track{background:linear-gradient(0deg,rgba(255,0,0,1)0%,rgba(7,0,211,1)100%);}html::-webkit-scrollbar-thumb{background:transparent;box-shadow:0px0px0px100vhblack;}

自定义滚动条的局限性及替代方案

创建自定义滚动条显然存在一些问题。首先是缺乏跨浏览器支持。其他问题可能是缺少向滚动条添加过渡或动画的功能，以及自定义滚动条不会出现在移动设备上。

另一种 *** 是隐藏默认滚动条并使用库，但当用作页面的主滚动条时，这可能会影响性能。还有其他潜在的可用性问题，因为这些库依赖JavaScript来模仿本地滚动条的行为。

滚动条 自定义 样式 网站 属性