css滚动条（css不显示滚动条但可以滚动）
CSS滚动条样式教程–如何制作自定义滚动条
2021-05-05 10:06:22·徐大兄弟
您是否曾经访问过带有自定义滚动条的网站，并想知道他们是如何做到的？
在本教程中，您将：
了解可用于在浏览器中设置滚动条样式的本机CSS属性
使用CSS创建四个唯一的滚动条
了解一些外部库，这些库为自定义滚动条提供了跨浏览器的支持
自定义滚动条的优缺点
在进入代码之前，我认为值得为网站或应用程序创建自定义滚动条带来一些潜在的折衷。
好处是，与使用浏览器默认滚动条的数百万个网站相比，它可以使您的网站脱颖而出。任何能让您的网站更容易被访问者铭记的内容都将使您长期受益。
另一方面，许多UI设计人员认为，您永远不应干扰滚动条之类的“标准化” UI组件。如果您过多地修改滚动条，可能会使使用您的网站或应用程序的人感到困惑。
如果您是为自己的个人网站执行此操作，则只要您喜欢它的外观，就可能不必担心它。
另一方面，如果您想在工作中或想要赚钱的项目中实现自定义滚动条，则应尝试A / B测试并根据结果做出以数据为依据的决策。
在一天结束时，我们大多数人都在编写代码来增加业务收入，因此您始终需要牢记这一点。
入门
您需要做的第一件事是创建一个基本布局，以便页面足够大以实际在Web浏览器中显示滚动条：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel='stylesheet' href="styles.css"><title>Document</title></head><body><div class="container"><h1>CSS Scrollbar Customization</h1><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p class="para">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div></body></html>
这里没什么好想的，只是一个基本的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-scrollbar –整个滚动条
::-webkit-scrollbar-track –滚动条的整个进度条区域
::-webkit-scrollbar-thumb –滚动条的可拖动部分
以下属性可用，但较不常用：
::-webkit-scrollbar-button –滚动条两端的向上/向下按钮
::-webkit-scrollbar-track-piece –滚动条未被拇指覆盖的部分
::-webkit-scrollbar-corner –水平和垂直滚动条相交的底角
滚动条的Firefox CSS样式属性
当前有两个可用的CSS属性可用于在Firefox中设置滚动条的样式
scrollbar-width –控制滚动条的宽度，只有两个选项是auto或thin
scrollbar-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中的悬停和活动伪元素来进一步设置滚动条的样式。 在这种情况下，当您将鼠标悬停并在拇指上拖动时，滚动条将变为更深的灰色。
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;}图案滚动条
在本节中，重点是使用重复的线性渐变在滚动条轨道上创建图案效果。 滚动条的拇指也可以做同样的事情。
还要注意的另一件事是，您可以使用边框设置滚动条拇指的样式，可以使用它创建许多很酷的效果。 在这种情况下，我将拇指的背景色设为透明，以便您在滚动时可以看到滚动条的轨迹样式。
html::-webkit-scrollbar {width: 20px;}html::-webkit-scrollbar-track {background-image: repeating-linear-gradient(45deg, red 0, red 1px, transparent 0, transparent 50%);background-size: 10px 10px;}html::-webkit-scrollbar-thumb {background: transparent;border-radius: 5px;border: 2px solid black;box-shadow: inset 1px 1px 5px black ;}“动画”渐变滚动条
本示例使用线性渐变和带有框阴影的技巧来使它看起来像滚动条在您上下移动页面时正在改变颜色。 真正发生的是滚动条轨道的背景正显示在拇指下方。
之所以起作用，是因为阴影框占据了滚动条的所有空间（拇指所在的位置除外）。 由于拇指是透明的，因此背景的渐变颜色会显示出来。
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: 0px 0px 0px 100vh black;}自定义滚动条的局限性和替代方法
创建自定义滚动条显然存在一些问题。 首先是缺乏跨浏览器支持。 其他问题可能是缺乏向滚动条添加过渡或动画的功能，以及自定义滚动条不会出现在移动设备上的事实。
另一种方法是隐藏默认滚动条并使用库，但这在用作页面的主滚动条时可能会影响性能。 还有其他潜在的可用性问题，因为这些库依赖JavaScript来模仿本机滚动条行为。
