易坊好文馆

  1. 首页 > 生活百科 >

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

CSS滚动条样式教程——如何定制滚动条2021-05-05 10: 06: 22徐师兄你有没有访问过一个带有自定义滚动条的网站，想知道他们是怎么做到的？
在本教程中，您将:
了解可用于设计浏览器滚动条样式的原生CSS属性 。
使用CSS创建四个独特的滚动条
了解一些为自定义滚动条提供跨浏览器支持的外部库 。
自定义滚动条的优点和缺点
在进入代码之前，我认为为网站或应用程序创建自定义滚动条带来一些潜在的妥协是值得的 。
好处是，它可以让你的网站与数百万使用浏览器默认滚动条的网站相比，鹤立鸡群 。任何能让你的网站更容易被访问者记住的东西都会让你受益很久 。
另一方面，许多UI设计者认为你不应该干涉“标准化”的UI组件，比如滚动条 。如果你过多地修改滚动条，可能会让使用你的网站或应用程序的人感到困惑 。
如果你是为了自己的个人网站这么做的话，只要你喜欢它的外观，可能就不用担心了 。
另一方面，如果你想在工作中或想赚钱的项目中实现自定义滚动条，你应该尝试A/B测试，并根据结果做出基于数据的决策 。
在一天结束的时候，我们大多数人都在编写代码来增加业务收入，所以你永远需要记住这一点 。
初级课程
您需要做的第一件事是创建一个基本布局，以便页面足够大，能够在Web浏览器中实际显示滚动条:
Document
CSS滚动条自定义\"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.\"
\"传说中的英雄，被认为是杰出的英雄，因为他是一个伟大的英雄 。尽管如此，我们的实习仍然是在商品市场进行的 。在自愿的基础上，我们有了更多的痛苦 。除了偶尔临时缺席，必须在法庭上正式宣布这是劳动 。”
\"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.\"
\"传说中的英雄，被认为是杰出的英雄，因为他是一个伟大的英雄 。尽管如此，我们的实习仍然是在商品市场进行的 。在自愿的基础上，我们有了更多的痛苦 。除了偶尔临时缺席，必须在法庭上正式宣布这是劳动 。”
\"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.\"
\"传说中的英雄，被认为是杰出的英雄，因为他是一个伟大的英雄 。尽管如此，我们的实习仍然是在商品市场进行的 。在自愿的基础上，我们有了更多的痛苦 。除了偶尔临时缺席，必须在法庭上正式宣布这是劳动 。”
\"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.\"
\"传说中的英雄，被认为是杰出的英雄，因为他是一个伟大的英雄 。尽管如此，我们的实习仍然是在商品市场进行的 。在自愿的基础上，我们有了更多的痛苦 。除了偶尔临时缺席，必须在法庭上正式宣布这是劳动 。”
\"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.\"
\"传说中的英雄，被认为是杰出的英雄，因为他是一个伟大的英雄 。尽管如此，我们的实习仍然是在商品市场进行的 。在自愿的基础上，我们有了更多的痛苦 。除了偶尔临时缺席，必须在法庭上正式宣布这是劳动 。”
这里没有什么要考虑的，只是一个基本的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样式属性
目前，在Firefox中有两个CSS属性可以用来设计滚动条的样式 。
滚动条-宽度-控制滚动条的宽度，只有两个选项是自动或瘦 。
scroll bar-color-接受两种颜色，这两种颜色用于按顺序给thumb和滚动条着色 。
现在你已经知道了自定义滚动条的选项，我们将通过一些例子把它们付诸实践 。
深色主题滚动条
黑暗主题网站现在非常流行 。坚持默认的浏览器滚动条可能会惹恼用户，因为它不适合黑暗主题的网站 。
让我们用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;}
图案滚动条
在这一节中，重点是使用重复的线性渐变在滚动条轨道上创建图案效果 。滚动条的拇指也可以做同样的事情 。
另一个需要注意的是，你可以使用边框来设计滚动条的样式，并且你可以用它来创建许多很酷的效果 。在这种情况下，我将我的拇指的背景颜色设置为透明，这样你就可以在滚动时看到滚动条的轨迹样式 。
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;}
自定义滚动条的局限性及替代方案
创建自定义滚动条显然存在一些问题 。首先是缺乏跨浏览器支持 。其他问题可能是缺乏向滚动条添加过渡或动画的功能，以及自定义滚动条不会出现在移动设备上的事实 。
【css不显示滚动条但可以滚动 css滚动条】另一种方法是隐藏默认滚动条并使用库，但当用作页面的主滚动条时，这可能会影响性能 。还有其他潜在的可用性问题，因为这些库依赖JavaScript来模拟本地滚动条行为 。

    推荐阅读


    上一篇：人体九大体质表现及调养 身体素质

    下一篇：香辣干锅牛蛙 干锅牛蛙