原来的JS实现模拟滚动条

当页面中有许多滚动条时，它们彼此嵌套，非常难看。在这个时候，他们将模拟滚动条，并给滚动条一个不错的风格，使页面美丽。

很多时候，模拟滚动条使用jQuery插件，然后写几行代码来做。然而，随着业务的快速发展，很多时候是懒得使用jQuery。这是本文的动机。这只公鸡努力不依靠jQuery和单纯依靠MVVM完成一个简单的滚动条（Avalon）API代码。

要求：

1。鼠标滚轮允许滚动条工作和界面滚动。

2。鼠标可以拖动滚动条和滚动界面。

三.页面大小调整，滚动条仍然可以根据页面大小的变化而工作。

影响：
显然，这个组件是基于拖动拖动的，这个公鸡不想重写。它只会改变UI框架的拖动。这是简单的js UI的拖动组件。

刁改变方法在简单的JS界面拖动组件到一个Avalon API方法，消除原型的方法和代码冗余。
定义（拖，{ 'avalon-min}，功能（Avalon）{）
功能getboundary（集装箱、目标）{
无功bordertopwidth = 0，borderrightwidth = 0，borderbottomwidth = 0，borderleftwidth = 0，coffset =阿瓦隆（容器）
。偏移（），coffsettop = coffset.top，coffsetleft = coffset.left，toffset =阿瓦隆（目标）
偏移量（）；
bordertopwidth = parseFloat（avalon.css（容器，'bordertopwidth '））；
borderrightwidth = parseFloat（avalon.css（容器，'borderrightwidth '））；
borderbottomwidth = parseFloat（avalon.css（容器，'borderbottomwidth '））；
borderleftwidth = parseFloat（avalon.css（容器，'borderleftwidth '））；
coffsettop = coffsettop - toffset.top + parseFloat（Avalon（目标），Css（' '））；
coffsetleft = coffsetleft - toffset.left + parseFloat（Avalon（目标），Css（右））；
返回{
上图：coffsettop + bordertopwidth，
右：coffsetleft +阿瓦隆（容器），OuterWidth（）Avalon（）OuterWidth（目标）。
- borderrightwidth，
左：coffsetleft + borderleftwidth，
底部：coffsettop +阿瓦隆（容器），OuterHeight（）Avalon（）OuterHeight（目标）。
- borderbottomwidth
}；
}
函数（目标，选项）{
var默认值= {
轴：空，
容器：null，
句柄：null，
ondragmove：空
}；
var o = avalon.mix（默认选项），
doc = target.ownerdocument，
赢得= doc.defaultview doc.parentwindow | |，
originhandle =目标，
议=！- { 1，}
处理=议目标：DOC，
集装箱= o.container o.container：空，
计数= 0，
拖动=此，
轴= o.axis，
ismove = false，
边界，在originalx，手，
clearselect = 'getselection'in赢得函数（）{（）
win.getselection（）RemoveAllRanges（）；
}函数（）{
尝试{
Doc.selection.empty（）；
}
catch（e）{ }；
}，
函数（e）{
o.isdown =真；
VaR的目标=目标，
左，顶，偏移；
o.width =阿瓦隆（目标）的OuterWidth（）；
o.height =阿瓦隆（目标）的OuterHeight（）；
o.handle =处理；
左=阿瓦隆（的目标），Css（右）；
顶=阿瓦隆（的目标），Css（最重要的）；
偏移量=阿瓦隆（靶点）偏移（）；
drag.left =左= parseInt（左）；
drag.top = = parseInt（上）；
drag.offsetleft = offset.left；
drag.offsettop = offset.top；
originalx = e.pagex左；
手= e.pagey顶；
如果（！（！边界容器）{
Boundary = getBoundary (container, newTarget);
}
如果（轴）{
如果（轴= x）{
手=假；
}
如果（轴= Y）{
originalx = false；
}
}
如果（议）{
handle.setcapture（）；
}
Avalon.bind（把手，'mousemove，移动）；
Avalon.bind（把手，'mouseup了）；
如果（议）{
Avalon.bind（把手，'losecapture了）；
}
e.stoppropagation（）；
E.preventDefault（）；
}，
移动=函数（e）{
如果（！o.isdown）{
返回；
}
计数+；
如果（计数% = 2 = 0）{
返回；
}
无功currentx = e.pagex，
目前，e.pagey，
target.style风格=，
x，y，左，右，上，下；
clearselect（）；
ismove =真；
如果（originalx）{
x = currentx - originalx；
如果（边界）{
左= boundary.left；
右= boundary.right；
左向左：
x右对：
X；
}
drag.left = x；
drag.offsetleft = currentx - e.offsetx；
style.left = x + 'px；
}
如果（原）{
Y =盾-手；
如果（边界）{
最高boundary.top；
boundary.bottom底=；
y顶上：
下底：
Y；
}
drag.top = Y；
drag.offsettop =盾- e.offsety；
style.top = y + 'px；
}
（这o.ondragmove.call，拖）；
e.stoppropagation（）；
}，
函数（e）{
o.isdown = false；
如果（议）{
Avalon.unbind（把手，'losecapture）；
}
Avalon.unbind（把手，'mousemove）；
Avalon.unbind（把手，'mouseup）；
如果（议）{
handle.releasecapture（）；
}
e.stoppropagation（）；
}；
阿瓦隆（originhandle）。Css（'cursor '，'pointer）；
Avalon.bind（originhandle，'mousedown，下）；
拖动。
边界= getboundary（集装箱、目标）；
}；
}；
回拖；
}）；

此外，刷新（）方法添加到最后暴露阻力，其效果是更新滚动条，可以拖动在调整范围内。该方法用于滚动更新视图。
拖动。
边界= getboundary（集装箱、目标）；
}；
此外，在滚动条拖动过程中添加了一个钩子来移动，允许从外部添加侦听器功能。拖动时，它将触发侦听器函数并导入拖动参数。
（这o.ondragmove.call，拖）；
然后它的scrollbar.js
定义（'scrollbar，{ 'avalon-min，拖}，功能（Avalon，拖）{
功能的滚动条（套、滚动条、height_per_scroll）{ / /容器，滚动条，每轮的移动距离
这个scroll_height = 0； / /滚动条的高度
这个匕首= null； / /拖动组件实例
scrollTop = 0包；
默认的滚动条垂直位置和容器的位置
VaR自本，wrap_top =阿瓦隆（包裹）。偏移（）。顶阿瓦隆（文档）的ScrollTop（）；
监控函数ondragmove（拖）{ / /拖动组件拖，更新容器视图
包装。scrollTop =（parseFloat（滚动条。风格。顶部）- wrap_top）*
（wrap.scrollheight包装。自己）/（包。自己的自我。scroll_height）；
}；
功能setscrollposition（o）{ / /更新滚动位置
scrollbar.style.top = o.scrolltop *包。自己 /包。scrollheight + wrap_top + 'px；
}
功能inti_events（）{
Avalon.bind（包，'mousewheel功能（e）{）
如果（e.wheeldelta＜0）
scrollTop + = height_per_scroll包；
其他的
scrollTop = height_per_scroll包；
setscrollposition（总结）；
E.preventDefault（）；
}）；
自我。匕首=新的阻力（滚动条，{容器：包装：Y轴，ondragmove：ondragmove }）；
窗口。onresize =函数（）{
self.refresh_views（）；
Self.dragger.refresh（）；
}；
}
（这个。refresh_views =功能）{该视图的所有配件 / /更新组件，并暴露在外部调用
这里是容器的高度/容器浏览器可见部分的垂直位置，不考虑容器的边框、填充、边距。可以根据相应的场景进行修改。
包装。风格。高度=文档。文档元素}。clientheight-wrap_top + 'px；
自我。scroll_height =包。自己的自己/ wrap.scrollheight *包装；
容器高度等于滚动条高度，隐藏滚动条。
如果（自我。scroll_height = =包装。自己）
滚动条，显示=没有人的风格；
其他的
滚动条显示为阻止的。风格；
滚动条。风格。高度=自我。scroll_height + 'px；
setscrollposition（总结）；
}
函数init（）{
self.refresh_views（）；
inti_events（）；
}
init（）；
}
返回滚动条；
}）；

你可以看到，在调整大小，拖动组件的刷新方法调用更新滚动条，可以拖动的范围，refresh_views（）方法是暴露在这里对付手动更新视图的外部需求。例如，折叠和展开的聊天群。
所以简单的滚动条已经完成了，代码很简单，如果你需要一个修复错误或者一个习惯，它很简单。

以上就是这篇文章的全部内容，希望大家能喜欢。