javascript - Dandy Weng 2014年的个人主页的滚动条是怎么做的？
问题描述
想采纳两条答案怎么办:(
真的对不起啦~因为想采纳两条答案 无奈自己总结了下
网址在这里——http://www.dandyweng.com/vers...
就是这样的一个滚动条，浓浓的苹果风的滚动条，
Firstly，是怎么做到把滚动条置于页面之上的？就是，滚动条之外的地方是透明的；
Second，这个滚动条在页面禁止时会变成透明的，好神奇；
我还发现，在演讲那里，滚动条会置于一个元素的下面；
这样的一个滚动条是怎么做的？
谢谢:)
感谢各位小伙伴的回答。提出问题后，自己也去找了找，大概知道了一个像这样子的滚动条要如何实现了。
先再来看一下Dandy Weng 2014网页上面的滚动条——
这确实是一个很神奇的滚动条。
实现一个滚动条，大概是这三种方式：
使用-webkit-scrollbar。但是这样一种方式能达到的效果，相比于下面这种方式来说，的确是很有限。
自己写jQuery。就是自己写咯，前面有位小伙伴提到过了，完全可以用jQuery写出一个滚动条来，然后替换掉原来的滚动条。
使用插件。自己也去试了试，发现自己写的话，还是有些麻烦的，要是不想自己写，用插件也是一个不错的选择。
在这之前题主就真的只知道第一种方法，但是找遍了网络也没有找到写出像上面这张图片那样的滚动条的方法来。而且，用这样一种方式，貌似就真的只能在-webkit内核的浏览器中使用了。
先来看看这个怎么用——
::-webkit-scrollbar-thumb {
border-radius: 8px;
width: 8px;
background: #233333;
}
大概就像这样子的了，插入到css中就可以生效了。
属性大概有这些：
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb 拖动条，滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
（转载自http://alfred-sun.github.io/b...）
仅仅是这些属性，其实就可以改变很多了，可以改变颜色，形状，宽度。
但是，仅仅靠这个，好像还是做不出来上面那个滚动条的效果的。
第二种方法，就是自己写jQuery！
问完这个问题的第二天，就很幸运在慕课网上看到了这样一个教程，是关于用jQuery实现滚动条的——
这里面的源码倒是可以看看——
（老师没有在这个课程给出源码，但是评论中已经有大神给出来了）
这个评论页面下面有一条评论给出了这个课程项目的源码，可以参考一下，在写这份东西的时候，那个评论在最顶上。
http://www.imooc.com/comment/675
这是一个用jQuery实现滚动条的案例，原理就是监听滚动啦，然后同步位置。这样的话，滚动条就完全由您自己决定了！想要什么样的就要什么样的，非要在滚动条上面加个链接也没人管你了。而且，还可以为这个自制的滚动条添加交互效果，比如说，上面的那个滚动条，在页面停止滚动的时候就会变透明啦，都可以了！
但是这么写来，是不是感觉略有麻烦呢？没关系，现在什么插件不是网上找得到的啊！有一位小伙伴就分享了自己常用的插件：nicescroll.js
可以在这里下载 https://github.com/inuyaksa/j...
可以在这里查看使用方法 http://carlofontanos.com/how-...
自己也去感受了下这个插件，功能还是蛮多的，而且真的 很 好 用！
这下子，妈妈什么问题都不用担心啦！
再回到最开始的话题，Dandy Weng 2014网页上面的滚动条…
我用IE打开了下这个网页，发现还是有bug的——
注意到滚动条了吗？变成这样了~
原来的滚动条还在，就是…怎么默认的滚动条也出来了！
在研究之前慕课网上面的那个案例的时候发现，这种用jQuery实现的滚动条，在移动端上（手机啥的），根本就用不了！
难道只能用默认的滚动条了么 >_<
那么，手机上访问Dandy Weng 2014是什么样子的？
好吧，这里我懒了，没截图，小伙伴们自己去试试吧哈哈
手机上，滚动条就消失了！取而代之的是，为触屏而生的滑动效果！
因为这个网站是一块又一块的，每一次显示就是满满屏幕上面的一块，真的是好有创造力啊！
我又去试了下前面提到的那个框架，发现在手机上会自己使用回原来默认的滚动条，这个设计不错。
总的来说，jQuery实现的滚动条，效果可以很酷炫，但是，原生的滚动条，在加载速度上会好很多，资源占用上也会好很多。
Dandy Weng在日志中提到过，他2015年的网站会首先从简单的设计去考虑（https://blog.dandyweng.com/20...）。所以，他的新网站也就没有用那个看起来高大上的滚动条了。
（图为Dandy Weng 2015）
这个新网站加载速度也确实快了不少。
最后，IE也有自己的滚动条设定CSS
scrollbar-face-color: #233333;
不过，令人不爽的是，IE下面这些CSS只能设定滚动条的颜色。
对比几个滚动条，个人感觉还是IE的滚动条最好看——
透明的，悬浮于页面上方，页面不动的时候还会乖乖的变透明。
可惜啊，IE的最后一代已经出来好一阵子，不知道什么时候就要退出去了。
本人以前拿着IE爱不释手，现在已经转去用谷歌了。
此外，你还可以通过这行代码让滚动条消失，同时页面可以滚动：（转载自https://blog.niceue.com/front...）
.element::-webkit-scrollbar {display:none}
END
这篇关于javascript - Dandy Weng 2014年的个人主页的滚动条是怎么做的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
