Maison > Article > interface Web > Écrivez un exemple de code de barre de défilement simple en js

Écrivez un exemple de code de barre de défilement simple en js

零下一度original: 2017-06-27 10:36:071055parcourir

<!DOCTYPE html><html><head><title>滑动条</title><meta charset="utf-8"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><script type="text/javascript" src="./hScoll.js?1.1.11"></script></head><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><body><div id="content"><div id="scoll"><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></body><script>var options ={
        interactiveScrollbars:true}
    window.hScoll.buildScoll('content',options);</script></html>

code 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)<=parseFloat(this.ch)){
                App.sdiv = document.createElement(&#39;div&#39;);
                App.scollb = document.createElement(&#39;div&#39;);
                App.sdiv.setAttribute(&#39;class&#39;,&#39;scrollbars&#39;);
                App.scollb.setAttribute(&#39;class&#39;,&#39;scollb&#39;);
                App.scollb.style.height = parseFloat(this.h)*parseFloat(this.h)/parseFloat(this.ch) + &#39;px&#39;;
                App.el.appendChild(this.sdiv);
                App.sdiv.appendChild(this.scollb);
                App.initevent();
            }
        },/**绑定事件*/initevent:function (){
            App.el.addEventListener(&#39;touchstart&#39;, App.touchstart, false);
            App.el.addEventListener(&#39;touchmove&#39;, App.touchmove, false);
            App.el.addEventListener(&#39;touchend&#39;, App.touchend, false);
        },/**记录滑动初始位置*/touchstart:function(e){var point = App.getPoint(e);
            App.startY = point.pageY;
        },/**手指移动时，滚动条滚动*/touchmove:function(e){
            e.preventDefault();//阻止默认行为var point = App.getPoint(e);
            App.moveY = point.pageY;
            App.deltaY = App.startY - App.moveY;if((App.prevY - App.deltaY)<=0 && (App.prevY - App.deltaY)>= -(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)<=0 && (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 <= -(App.ch-App.h)){
                App.prevY = -(App.ch-App.h);
                App.domove(App.prevY,true);
                App.domove2(App.prevY,true);
            }
        },

        getPoint:function (e) {return e.touches ? e.touches[0] : e;
        },/**内容滑动*/domove:function (y,t){if(t){
                App.scoll.setAttribute('style', 'transform: translate(0px, '+y+'px);transition:transform 300ms ease');
            }else{
                App.scoll.setAttribute('style', 'transform: translate(0px, '+y+'px);transition:transform 0ms ease');
            }
        },/**滚动条滑动*/domove2:function(y,t){if(t){
                App.scollb.setAttribute('style', 'transform: translate(0px, '+-parseFloat(y)*parseFloat(App.h)/parseFloat(App.ch)+'px);transition:transform 0ms ease;height:'+parseFloat(App.h)*parseFloat(App.h)/parseFloat(App.ch) + 'px'+'');
            }else{
                App.scollb.setAttribute('style', 'transform: translate(0px, '+-parseFloat(y)*parseFloat(App.h)/parseFloat(App.ch)+'px);transition:transform 0ms ease;height:'+parseFloat(App.h)*parseFloat(App.h)/parseFloat(App.ch) + 'px'+'');
            }
        }
    }
})();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation Iscroll du didacticiel d'actualisation déroulant et pull-upArticle suivant：Implémentation Iscroll du didacticiel d'actualisation déroulant et pull-up

Articles Liés

Voir plus