江苏龙网

  1. 主页 > 生活百科 > >

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


"传说中的英雄，被认为是杰出的英雄，因为他是一个伟大的英雄 。尽管如此，我们的实习仍然是在商品市场进行的 。在自愿的基础上，我们有了更多的痛苦 。除了偶尔临时缺席，必须在法庭上正式宣布这是劳动 。”
这里没有什么要考虑的，只是一个基本的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;}自定义滚动条的局限性及替代方案


推荐阅读


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

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