看出这两个图的区别了吗？这就是我今天奋战大半天的成果！
啥？没看出来？不是吧，一个白色刺眼，一个没了！今天做了很表面化的工作——把默认滚动条改用jquery格式化了！这再也不是从前，很久很久以前在IE下用CSS就能修改搞定的东西。
建成MAP OF DESTINY 2012的时候，我就已经觉得那个只能必须内嵌的滚动条很刺眼了，当时也知道用jquery可以解决，但一直没有在那里花心思。直到今天偶尔看到介绍高级滚动条的文章，于是就试验了。
这次使用的是mCustomScrollbar，据说这是非常高级的玩意，没有做不到只有你想不到，太多隐藏功能，需要慢慢地去发掘，我就别不懂装懂了。
花了一个多小时就在静态页面中折腾出我想要的效果。但我的MAP OF DESTINY是动态加载的，需要加载Google Spreadsheet也需要加载Google Map。很不幸，这两种东西在天朝都需要翻墙。所以，这个地图做出来我的确不是为了给国人看的。这是给我自己看的，也是给外国人羡慕嫉妒恨的。理论上啊，静态网页测试成功的东西直接搬到map上就好，实际上不然。出现加载问题，翻墙、不翻墙、翻墙快慢会影响效果到底能不能显示出来。
很奇怪的现象，在不翻墙和翻墙速度快的情况下，网页一开始就告诉加载滚动条不成功，但在翻墙速度慢的时候加载反而OK。我的网速很好，但ouyansh的网速不好，于是在就形成了，我看不到效果，但他一开始就看到了。
经过一番周折后，ouyansh最终觉得那是网页加载延迟的问题，加了一个判断后，finally，finally，finally网页终于能在各种翻墙不翻墙以及网速的情况下都正确显示我的自定义滚动条效果了！！！
滚动条的样式是自定义的，我选用的是11px直径的圆点为滑块配合1px虚线的滚动槽，并不是用最传统的长条的滑块以及有一定宽度的滚动槽。所以，其实我冒着别人看不懂那是什么的风险做这个尝试的。因为这个效果是我最喜欢的，ouyansh说按照我的意思就好，别人就让他们忍忍吧。
在WWE全面开始放圣诞假期的今天，我闲得无聊，于是就有机会折腾这技术活了。
人是要勇于折腾的哈！
本文链接：https://my.lmcjl.com/post/10778.html
4 评论