原生js监听滚动条_原生js实现模拟滚动条

当页面中有很多滚动条，它们相互嵌套，很不好看，这时就会模拟滚动条，并给这个滚动条好看的样式，使得页面美观。

模拟滚动条很多时候是去用jquery插件，然后写几行代码就搞定了。不过随着mvvm的快速发展，很多时候都懒得用jquery了，这就是本文的动机，本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条。

要求:

1.鼠标滚轮可以让滚动条工作,界面滚动

2.鼠标可以拖动滚动条并让界面滚动

3.页面resize时，滚动条根据页面尺寸变化，仍然可以工作

效果:

很显然，这个组件是基于拖动drag的，本屌又不想重新写，就只有改下ui框架的drag了，这里改的是easy js ui的drag组件。用easy js是因为注释比较多，代码简洁。

本屌把easy js ui的drag组件里的相应方法换成avalon api里的方法，删掉prototype里的方法及冗余代码

define('drag',['avalon-min'],function(avalon){

function getBoundary(container, target) {

var borderTopWidth = 0, borderRightWidth = 0, borderBottomWidth = 0, borderLeftWidth = 0, cOffset = avalon(container)

.offset(), cOffsetTop = cOffset.top, cOffsetLeft = cOffset.left, tOffset = avalon(target)

.offset();

borderTopWidth = parseFloat(avalon.css(container,'borderTopWidth'));

borderRightWidth = parseFloat(avalon.css(container,'borderRightWidth'));

borderBottomWidth = parseFloat(avalon.css(container,'borderBottomWidth'));

borderLeftWidth = parseFloat(avalon.css(container,'borderLeftWidth'));

cOffsetTop = cOffsetTop - tOffset.top + parseFloat(avalon(target).css('top'));

cOffsetLeft = cOffsetLeft - tOffset.left + parseFloat(avalon(target).css('left'));

return {

top : cOffsetTop + borderTopWidth,

right : cOffsetLeft + avalon(container).outerWidth() - avalon(target).outerWidth()

- borderRightWidt