Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. CSS

小技巧:为滚动条添加样式来匹配你的UI设计

by
Read Time:8 minsLanguages:

Chinese (Simplified) (中文(简体)) translation by Alfred Y. Zhu (you can also view the original English article)

这个小技巧将会引导你来提升滚动条的外观以达到匹配你UI设计的目的。我们将来看看哪一些WebKit浏览器支持这个CSS,另外我们将使用jQuery的fallback来满足其他浏览器的支持。

想要抄个捷径?

如果正在寻求帮助来为你网站的特定组件添加样式,那么你可以从专家那里找到更快速的解决办法,Envato有众多的专家们随时准备帮助你重新为你添加样式或者自定义所有种类的网页组件

Web component services on Envato StudioWeb component services on Envato StudioWeb component services on Envato Studio

关于浏览器的快速笔记

当我们涉及到以WebKit为基础的浏览器的时候,我们本质上是在说Apple的Safari和Google Chrome。他们两加起来大约占据了超过40%的全部桌面浏览器市场。 对于平板电脑来说,Apple的iPad总是会使用Webkit无论它使用的是任何公司的浏览器。Google同时也添加了Chrome到它的安卓系统以及Chromebooks里,当然了,这些都是基于Google Chrome的。

看到这些数据以后,我们应该不难想象在不久的将来,滚动条的样式化一定是很有前景的。


步骤1:一个有滚动条的简单页面

在我们可以实际的使用CSS来创建样式并开始这个教程之前,我们需要一个可以正常工作的样例;一个拥有滚动条的页面。通常来说,滚动条在满足以下条件时可见:

  • 文字内容比可见的窗口区域要大(一个滚动条将在右侧显示)。
  • 一个包含了足够文字的textarea,这样滚动条也会出现。
  • 一个iframe用来显示一个不同的页面。
  • 一个div或者任何其他的区块元素并且包含了overflow属性集的。

为了实现这个样例,我们将使用最后一个选项,这里是我的最初的结构代码:

这只是一个div以及一大堆虚拟的内容,然后这里是最开始的CSS,它会设置一些固定的尺寸和横向及纵向滚动条的触发器:

你应该会看到一些结果看起来像下面这样:


步骤2:开始针对Webkit内核浏览器的代码

有一段时间以前(几年前)CSS伪类元素被从Webkit内核浏览器开发出来针对滚动条,正是这样才带给了我们根据主题来改变滚动条样式的可能性。

让我们开始添加一些样式,使用-webkit-前缀以及wenkit的自定义滚动条属性。记得,我将只会演示最基本的CSS属性来让你明白原理,更多的解释你可以看到我包含在了注释里。

当这个伪类元素显示时,WebKit会关闭浏览器自带的滚动条渲染并仅仅使用CSS里提供的样式信息。 ——Surfin' Safari

那么现在我们需要添加一些其他的伪类元素:

在添加了这些CSS之后你,你应该可以看到下面的效果(再一次强调,只是在Webkit内核的浏览器)。

你猜怎么样?IE浏览器有它自己的滚动条样式!

是的——事实上,IE是第一个支持用CSS来为滚动条添加样式的浏览器,这个可以追溯到IE5.5的版本,但是只有颜色可以改变。

这个内容可以被用在今天;看看下面这个单个的IE9属性,仅供展示。

我们来看看最终结果:


步骤3:非Webkit浏览器的Fallback功能

完成了Webkit的部分,Firefox、IE和Opera也可以来分享这一部分的快乐,对于他们,我们有一个非常漂亮的fallback来实现这个功能,我们需要用到jScrollPane,这个jQuery插件是由Kelvin Luck开发的,而且它会是我们今天的救星。

Kelvin的网站上有很多很好的样例,但是对于基本的使用来说,我们需要的就是下载jQuery以及这个jScrollPane的文件并将它们导入到页面中,你可以使用以下方式:

为了做到匹配我们的主题,让我们打开jquery.jscrollpane.css然后编辑以下几行,来改变颜色的值(为了增强性能,你可能希望将所有的样式都放到你自己的文件里):

这里是一个你将要看到的Firefox浏览器结果的屏幕截图:


结语

在线程序诸如Gmail和Google+(以及其他很多的案例)都已经包含了这个想法了,而且如果这个势头继续下去,可能Firefox和IE也会同时提供出他们自己的解决方案。

我希望你很享受这个小技巧,我也很期待看到你能将这个滚动条的设计运用到你自己的项目中去!


更多的资源

Envato Market上可自定义的滚动条

如果你正在寻找现成的解决办法,Envato Market提供给你一个集合的滚动条,你可以简单的将它们插入到你的网站中来达到各种不同的效果。这里是其中的一些素材:

1. Lazybars - 主题可变的自适应滚动条jQuery插件

Lazybars是一个简单易用,主题可变的jQuery滚动条插件,你仅仅需要添加一个class名字到任何你网站上可以滚动的元素上即可实现这个滚动条效果。

使用与Lazybars一起绑定的主题,或者使用一些简单的CSS来创建你自己的主题。

Lazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery pluginLazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - 主题可变的自适应滚动条jQuery插件

2. Fancy滚动条 - Wordpress

“Fancy Scrollbar – WordPress”是一个你可以允许你在WordPress网站上创建自定义滚动条的插件,它有很多自定义的选项,你可以自定义颜色、特效、滚动延迟、轨道剥离、以及更多其他的参数。

Fancy Scrollbar - WordPressFancy Scrollbar - WordPressFancy Scrollbar - WordPress
Fancy滚动条 - WordPress

3. 绝好的自定义滚动条

这个绝好的自定义滚动条是一个可以被高度自定义化的滚动条jQuery插件,它可以被用在你的WordPress网站上,拥有了这个插件,你可以自定义你网站的滚动条,并且你可以在你想要的任何地方植入自定义样式的滚动条并且只需要输入短代码即可,甚至是在主题的文件里。

Awesome Custom ScrollbarAwesome Custom ScrollbarAwesome Custom Scrollbar
绝好的自定义滚动条

4. DZS滚动条

DZS滚动条为你的网站提供了一个你可以通过CSS非常简单的自定义的滚动条,当然这是在其包括的三个皮肤并不能满足你的情况下。 它同时具有其他高级功能,例如鼠标悬停即滚动,或者鼠标移开即淡出等。而且它与iPhone/iPad兼容。

DZS ScrollerDZS ScrollerDZS Scroller
DZS滚动条

5. CSS3滚动条样式

它简单易用,漂亮且色彩丰富,以CSS3为基础的滚动条可以简单的加入到你已有的CSS文件中,即可你就能享受这个新的CSS3滚动条。

CSS3 Scrollbar StylesCSS3 Scrollbar StylesCSS3 Scrollbar Styles
CSS3滚动条样式
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.