Saber 酱的抱枕

WordPress的文章编辑器好蛋疼，代码模式下如果插入的代码有空行，就会自动加上p标签，还把&符号给转码了，想插入直接运行的代码还是只好用iframe。

前两天看到bilibili个人中心的收藏夹，收藏夹改版后，左侧显示的是分类列表，那里用了一个自定义滚动条。于是我也想做一个出来。花了大半天时间，终于做出来了，运行良好。

由于最外层div设置了overflow:hidden属性，所以滚动也需要用鼠标滚动事件来做。这个之前做过，没费多大事就做出来了。到了用滚动条控制滚动的时候就犯难了。因为以前用到鼠标事件基本上就是onclick，现在的拖动则要使用mousedown、mousemove、mouseup这三项。百度之后看到了别人写的结构，这才明白了一些。然后设置鼠标移动时的事件，设法减小计算量（有些值甚至有三种方法可以设置），增加必要的限制。真是步步维艰，光拖动这块，最少用了4个小时才完成。不过做完了收获也不小。

做这部分的时候我发现如果把mousemove事件写到mousedown里面，而且过后不解除绑定的话，会累计次数。就是说你第2次触发mousemove的时候是执行2次，触发第10次的时候是10次……写到外面不知道是否可以避免。

代码比较多，不贴了，查看demo更好一些。demo里也保留了很多注释。

需要jq支持；代码已经封装成了函数，可以直接饮用（参数代码里有说明）。你需要在网页中预设的高度有三个：外层box的高度，主体部分的高度和滚动条容器的高度。鼠标滚轮每次滚动多少个像素是由变量preHeight规定的。

当然，在实际使用中也要注意这几个主要结构的css属性，例如外层box的overflow:hidden;以及一些定位属性等。

此代码在chromeV45、firefoxV39、IE8、IE11中测试通过。

注意：

在实际中使用，不建议应用到全网页上（虽然我已经在本站上成功试验过了）。因为外层box的高度小于内容的高度（要不怎么会出现滚动条），而且设置了overflow:hidden属性。这将导致这个区域的翻页快捷键无效（例如上下方向键、翻页键等），会影响用户体验。如果把body标签作为最外层容器，很容易被发现。

此外，在移动设备上这个完全没卵用。

所以这个玩意较为适合的使用场景是在单独的区域上使用。

js制作的的自定义滚动条