自定义网页内的滚动条

dimlau

CSS的作用就是改变内容呈现的样式,于是,几乎每个站点的网页上链接的颜色、图片的边框、文字的阴影等等都有各自独特的赋值。但是滚动条确是很少有人动的一个部位。

但是当然也有人动过了,比如 fireyywayne

因为他们都是水果控,所以实现方法当然是用 Safari 的私有 CSS 属性(同内核的 Chrome 浏览器当然也支持),我也照做了,本文就是个演示,如果使用 Safari 或者 Chrome 浏览器,应该可以看到窗口右侧那个苗条的滚动条了,如果使用别的浏览器......好吧,这里有张效果图片:

演示自定义网页内的滚动条

具体大体方法如下:

一、先给滚动条腾出个地方来;

body   {
position: absolute;/*1*/
top: 0;
left: 0;
bottom: 0;
right: 10px;/*2*/
overflow-y: scroll;
overflow-x: hidden;/*3*/
}
  1. 只有设置成absolute滚动条才能正常显示;
  2. 留出一点点的距离,以便滚动条不至于紧贴浏览器右侧边界显示。
  3. 根据需求,也可改成 auto ,对应地,上面的 bottom 值也设置 10px;

二、干掉浏览器默认滚动条;

html {
overflow-y: auto;
background-color: transparent;
}

auto 或者 hidden 都可以;

三、定义新的滚动条;

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

width 和 height 分别定义竖向滚动条的宽度和横向滚动条的高度。

四、到上一步为止还看不到新的滚动条,下面开始让滚动条现身:

::-webkit-scrollbar-track-piece {/*1*/
background-color:#f6f6f6;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {/*2*/
background-color: #6b7f93;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {/*3*/
background-color: #6b7f93;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {/*4*/
height: 30px;
display: block;
background-color: transparent;
}
  1. 定义滚动条「轨道」的样式;
  2. 竖向滚动条样式;
  3. 横向滚动条样式;
  4. 滚动条两端的按钮区域;可以参考原始的浏览器滚动条,是不是两端会有按钮辅助滚动操作?那个按钮区域的样式就在这里定制。

相应的位置在定义样式的时候可以使用常用的那些属性,比如背景色、边框等等,甚至可以使用背景图片来制作更别致的滚动条部件。

这样虽然可以制作出和页面风格相匹配的滚动条,但是也有问题存在。

  • 因为在使用了自定义滚动条后 body 的 position 属性变成了 absolute ,那些常见的实现页面内平滑滚动的JS会失效。
  • 只在 webkit 内核的浏览器里有效。
  • 缩小浏览器窗口的宽度,右侧滚动条盖住页面内容的样子多少有点小别扭。

大体方法就是这样了,更详细的属性说明,请参照 webkit.org 给出的说明文章

关于作者:定格咖啡馆主理人,著有《开家长长久久的咖啡馆》《咖啡入门书》等。

延伸阅读

本站架设在 RamNode VPS

使用 Grav CMS 发布管理