元"/> <元">
nbsp;html><title>滑动条</title><meta><meta><meta><script></script><style>*{margin: 0;padding: 0;}#content{margin-top: 50px;width:100%;height: 200px;background: #eeeeee;overflow: hidden;position: relative;/**transform: translate(0px, -70px);*/}#scoll{overflow: hidden;}#content2{margin-top: 50px;width:100%;height: 200px;background: red;overflow: hidden;position: relative;/**transform: translate(0px, -70px);*/}#scoll2{overflow: hidden;}.scrollbars{position: absolute;height: 100%;right: 0;top: 0;width: 5px;border-radius: 5px;}.scollb{position: absolute;right: 0;top: 0;width: 100%;background: #999999;border-radius: 5px;}</style><div><div> <p>1111</p> <p>2222</p> <p>3333</p> <p>4444</p> <p>5555</p> <p>6666</p> <p>7777</p> <p>8888</p> <p>9999</p> <p>0000</p> <p>aaaa</p> <p>bbbb</p> <p>cccc</p> <p>dddd</p> <p>eeee</p> </div></div><script>var options ={ interactiveScrollbars:true} window.hScoll.buildScoll('content',options);</script>
js 程式碼
/** * Created by hechao on 2017/6/25. */(function(){/**添加window对象hScoll属性*/window.hScoll = { buildScoll:function(el,options){ App.init(el,options); } }var App = {/**初始化组件*/init:function(el,option){ App.options = option; App.prevY = 0; App.el = document.getElementById(el); App.scoll = this.el.children[0]; App.h = this.el.offsetHeight;//滑动范围高度App.ch = this.el.scrollHeight;//内容的高度if(parseFloat(this.h)= -(App.ch-App.h)){ App.domove(App.prevY - App.deltaY); }if(App.options.interactiveScrollbars){ App.domove2(App.prevY - App.deltaY); }else{if((App.prevY - App.deltaY)= -(App.ch-App.h)){ App.domove2(App.prevY - App.deltaY); } } },/**手指离开时,判断位置*/touchend:function(e){ App.prevY = App.prevY - App.deltaY;if(App.prevY >= 0){ App.prevY = 0; App.domove(App.prevY,true); App.domove2(App.prevY,true); }if(App.prevY
以上是js寫一個簡單的滾動條實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!