ui 滚动条隐藏_快速提示：设置滚动条样式以匹配您的UI设计

ui 滚动条隐藏

本技巧将指导您改善滚动条的外观，以使其与UI设计相匹配。 我们将看看WebKit浏览器在CSS方面为我们提供了什么，此外，我们还将使用jQuery后备功能来迎合其他浏览器。

寻找捷径？

如果您需要有关样式设计网站特定组件的帮助，则可以更快地从专业人士那里获得帮助。 Envato的专家随时准备帮助重新设计或自定义各种Web组件 。

---

关于浏览器的快速说明

当我们提到基于Webkit的浏览器时，实际上是在谈论Apple Safari和Google Chrome。 他们目前共同占据了整个桌面浏览器市场的40％以上。 对于平板电脑，无论使用哪个公司的浏览器，Apple的iPad都将始终使用Webkit。 Google还在其Android操作系统中添加了Chrome，并且Chromebook当然基于Google Chrome。

看看这些数字，滚动条样式应该有一个非常光明的未来！

---

步骤1：具有滚动条的简单页面

在开始使用CSS样式化滚动条的实际主题之前，我们需要一个功能演示。 带有滚动条的页面。 在以下情况下可以看到滚动条：

• 内容大于可见窗口区域（滚动条将出现在右侧）。
• 一个textarea包含足够的文本，以便出现滚动条。
• iframe用于显示其他页面。
• div或任何其他块元素均设置了其overflow属性。

为了这个演示，我们将使用最后一个选项。 这是我的初始标记：

<div class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    
    <p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>

    <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>

    <p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>

</div>

这只是一个包含大量虚拟内容的div 。 这是初始CSS，它设置了一些固定尺寸并触发了水平和垂直滚动条：

.container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

您应该能够看到类似以下内容：

---

步骤2：从Webkit浏览器开始

有时（ 几年前 ），在Webkit浏览器中引入了CSS伪元素以定位滚动条，从而提供了根据主题来设置页面样式的机会。

让我们使用-webkit-前缀和webkit的自定义滚动条属性来设置样式。 请记住，为了便于理解，我只保留基本CSS属性，并在注释中进行解释。

::-webkit-scrollbar {
		  width: 15px;
	} /* this targets the default scrollbar (compulsory) */

当存在此伪元素时，WebKit将关闭其内置滚动条渲染，仅使用CSS中提供的信息。 - 冲浪之旅

现在，对于其他一些伪元素：

::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

添加此CSS之后，您应该能够看到以下效果（同样，只是Webkit浏览器）。

Internet Explorer有其自己的滚动条样式！

没错-实际上IE是第一个通过CSS支持滚动条样式的浏览器。 当时是IE 5.5，但只能更改颜色。

这些属性今天仍然可以使用。 出于演示目的，请查看IE 9上的此单个属性：

body {
      scrollbar-face-color: #b46868;
  }

查看外观：

---

步骤3：非Webkit浏览器的后备

WebKit足够了。 Firefox，IE和Opera也可以加入其中。 对于他们来说，我们有一个非常不错的后备方法，形式为jScrollPane 。 这个jQuery插件是由Kelvin Luck开发的，它将成为我们今天的救星。

Kelvin的网站上有很多很好的例子，但是对于基本用途，我们需要做的就是下载jQuery和jScrollPane文件，并通过以下方式实现它们：

<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- latest jQuery direct from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- the jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

仅仅为了匹配我们的主题，让我们打开jquery.jscrollpane.css并用我们的颜色值编辑以下几行（为了提高性能，您可能希望将所有样式都放在自己的文件中）：

.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

这是您将在Firefox中看到的屏幕截图：

---

结论

Gmail和Google+等Web应用程序（以及许多其他示例）已经接受了这个想法，如果这种势头持续下去，也许Firefox和IE也将提供自己的解决方案。

希望您喜欢此快速提示，并期待看到您在设计工作中使用滚动条做什么！

如果您正在寻找现成的解决方案，Envato Market提供了一系列滚动条 ，您可以将其插入网站以实现多种效果。 看一下其中的一些：

Lazybars是易于使用的主题化滚动条jQuery插件。 您只需将类名称添加到网站上的任何可滚动元素即可实现这些滚动条。

利用Lazybars捆绑的主题，或使用一些简单CSS创建自己的主题。

“ Fancy Scrollbar – WordPress”是一个可以在WordPress网站上创建自定义滚动条的插件。 它有很多自定义选项。 您可以自定义颜色，效果，滚动延迟，滑条和更多参数。

DZS Scroller为您的站点提供了一个滚动条，如果其中包含的三个外观不够，则可以通过CSS轻松自定义。 它还具有增强的功能，例如，悬停滚动或鼠标离开时淡入淡出。 它可以在iPhone / iPad上使用。

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-styling-scrollbars-to-match-your-ui-design--webdesign-9430

ui 滚动条隐藏