js寫一個簡單的滾動條實例程式碼

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(&#39;content&#39;,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中文網其他相關文章！