Code d'implémentation de la barre de défilement personnalisée JavaScript-js tutoriel-php.cn

Au travail, nous rencontrons souvent du contenu qui dépasse une plage fixe. Généralement, les barres de défilement sont utilisées pour faire défiler et afficher le contenu dépassé.

Mais l'utilisation de la barre de défilement par défaut du navigateur est souvent méprisée par les chefs de produit, mais le style de la barre de défilement ne peut pas être modifié à l'aide de CSS Heureusement, il existe un js universel ^_^~~<.>

en ligne Il existe différents plug-ins, mais le plus pratique est de l'écrire vous-même. Vous pouvez également apprendre en jouant et fabriquer vous-même suffisamment de nourriture et de vêtements (*^__^*)

<.>Ces trois problèmes sont profondément troublés. Moi :

1. Hauteur de la barre de défilement

2 Jusqu'où la barre de défilement doit se déplacer à chaque fois que l'on clique sur les boutons haut et bas

<.>3. Défilement de 1 px par barre de déplacement, de combien la page doit-elle se déplacer ?

L'ensemble du cadre ressemble probablement à ceci :

Jetons d'abord un coup d'œil à la première question. Code dimplémentation de la barre de défilement personnalisée JavaScript

Puisque nous connaissons déjà la hauteur de la zone de contenu, la hauteur visuelle du contenu et la hauteur de la zone de défilement de la barre de défilement, puisque la zone de contenu est proportionnelle à la distance de chaque mouvement de la barre de défilement, donc le premier Le problème est facile à résoudre :

Plage mobile de la barre de défilement / hauteur de la barre de défilement = hauteur du contenu / hauteur visible du contenu

Jusqu'où la barre de défilement doit-elle se déplacer à chaque fois le bouton est cliqué ?

Ici, je définis une valeur pour le paramètre distance afin de déterminer jusqu'où la zone de contenu doit défiler à chaque fois que vous cliquez sur le bouton. Changer cette valeur peut modifier la vitesse de défilement de la zone de contenu. Si vous avez de meilleures méthodes de traitement et suggestions, veuillez me le dire ~

Actuellement, la distance de chaque défilement de la zone de contenu est connue, et le reste l'est. pour calculer le défilement De quelle distance les barres doivent-elles se déplacer les unes par rapport aux autres ?

La plage mobile de la barre de défilement / la distance parcourue par la barre de défilement à chaque fois = la hauteur de la zone de contenu / la distance dans laquelle la zone de contenu se déplace à chaque fois

L'effet est le suivant :

Il y a un autre problème ici, c'est-à-dire qu'il faut faire la distinction entre un simple clic et un appui long. Code dimplémentation de la barre de défilement personnalisée JavaScript

Vous devez donc juger du temps entre l'appui sur le bouton et son relâchement. Actuellement, il est réglé sur

Lorsque vous faites glisser la barre de défilement, de combien la zone de contenu doit-elle se déplacer pour chaque 1 px de mouvement de la barre de défilement ? Code dimplémentation de la barre de défilement personnalisée JavaScript

Sachez d'abord quel pourcentage de la plage mobile de la barre de défilement représente chaque distance de 1PX, puis divisez la hauteur de la zone de contenu par le pourcentage obtenu pour obtenir la distance de défilement relative de la zone de contenu pour chaque mouvement de 1px du défilement. bar. .

Distance de défilement de la zone de contenu = hauteur de la zone de contenu/(zone de défilement de la barre de défilement/1)

Le code complet de la démo est le suivant : Code dimplémentation de la barre de défilement personnalisée JavaScript

Remarque : Comme il est écrit en seajs, veuillez faire un peu attention au chargement du fichier

css :

.wapper{scrollbar-3dlight-color:#000; position:relative; height:302px;width:300px;overflow:hidden;margin:0 auto;line-height:40px;text-align:center;}
 .area{background-color:#E2E2EF;width:100%; position:absolute;top:0px;left:0px;}
 .bar{position:absolute;top:0px;right:0px; height:100%;width:1rem;background-color:#ccc;}
 .scroll,.middle,.forward,.backward{display:block;cursor:pointer;position:absolute;right:0px;width:100%;}
 .forward,.backward{height:16px;background-color:#6868B1;}
 .middle{background-color:rgba(255, 255, 255, 0.22);top:16px;cursor:auto;}
 .scroll{position:absolute;top:0px;background-color:#C2C2E9;}
 .forward{top:0px;}
 .backward{bottom:0px;}

Copier après la connexion

html :

<div class="wapper">
 <div class="area">
  <p>1、this is content</p>
  <p>2、this is content</p>
  <p>3、this is content</p>
  <p>4、this is content</p>
  <p>5、this is content</p>
  <p>6、this is content</p>
  <p>7、this is content</p>
  <p>8、this is content</p>
  <p>9、this is content</p>
  <p>10、this is content</p>
  <p>11、this is content</p>
 </div>
 <div class="bar">
  <span class="forward"></span>
  <span class="middle"><em class="scroll"></em></span>
  <span class="backward"></span>
 </div>
</div>
 
<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use([&#39;lib/jquery/1.11.x/index.js&#39;, &#39;_example/simulationScroll/simulationScroll.js&#39;], function($, scroll) {
 scroll.init({
  wapper: $(&#39;.wapper&#39;),
  distance: 10,
 });
});

Copier après la connexion

js :

define(function(require, exports, module) {
 
 &#39;use strict&#39;;
 
 var $ = require(&#39;lib/jquery/1.11.x/index.js&#39;);
 
 var parameter = null;
 
 //检测设备类型
 var startWhen, endWhen, moveWhen;
 var u = navigator.userAgent;
 
 if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
  // 鼠标
  startWhen = &#39;mousedown&#39;;
  endWhen = &#39;mouseup&#39;;
  moveWhen = &#39;mousemove&#39;;
 } else {
  // 触摸屏
  startWhen = &#39;touchstart&#39;;
  endWhen = &#39;touchend&#39;;
  moveWhen = &#39;touchmove&#39;;
 }
 
 var simulation = {
 
  _mousedownTimer: 0,
  _setintervalId: 0,
  _longClick: false, //是否长点击
  _turnOf: null, //滚动方向
 
  init: function(options) {
 
   var t = this;
 
   t._scroll = $(&#39;.scroll&#39;); //滚动条
 
   t._wapper = options.wapper.find(&#39;.area&#39;); //内容区域
   t._distance = options.distance; //点击上下按钮页面每次滚动的距离
 
   var forward = $(&#39;.forward&#39;),
    middle = $(&#39;.middle&#39;),
    backward = $(&#39;.backward&#39;);
 
   parameter = {
    view: t._wapper.parent().innerHeight(), //视图高度
    page: t._wapper.height(), //内容高度
    barArea: 0, //滚动条可移动范围
    scrollHeight: 0, //滚动条的高度
    scrollDistance: 0 //滚动条每次滚动的距离
   };
 
   //初始化滚动条
   if (parameter.page > parameter.view) {
 
    //滚动条可移动范围
    middle.height( parameter.view - forward.height() * 2);
 
    parameter.barArea = middle.height();
 
    //滚动条高度 = 滚动条可滚动范围 / （页面高度 / 可视高度）的百分比
    parameter.scrollHeight = parameter.barArea / (parameter.page / parameter.view) ;
    t._scroll.height(parameter.scrollHeight);
 
    //滚动条每次滚动的距离 = 滚动条可移动范围 * 页面每次滚动的百分比
    parameter.scrollDistance = parameter.barArea / (parameter.page / t._distance) ;
 
    //拖动滚动条
    t.liveEvent();
 
    //点击向前按钮,如果按下鼠标到松开鼠标的时长<100ms,则为单次点击
    forward.bind(startWhen, function(e){
 
     t._turnOf = &#39;forward&#39;;
 
     t.longPress(e, t.direction );
 
    }).bind(endWhen, function(e) {
 
     t.mouseupFun(e, t.direction);
 
     t._turnOf = null;
 
    });
 
    //点击向后按钮
    backward.bind(startWhen, function(e){
 
     t.longPress(e, t.direction );
 
    }).bind(endWhen, function(e){
 
     t.mouseupFun(e, t.direction );
 
    });
 
    //注册鼠标滚动事件
    // FF
    if(document.addEventListener){
     document.addEventListener(&#39;DOMMouseScroll&#39;,t.mouseRuning,false);
    }
 
    //其它浏览器
    document.onmousewheel = t.mouseRuning;
   }
  },
 
  //鼠标滚动
  mouseRuning: function(e) {
 
   var t = simulation;
 
   e = e || window.event;
 
   //ie、FF
   if (e.detail) {
    if (e.detail < 0) {
 
     t._turnOf = &#39;forward&#39;;
 
     t.direction ();
 
    } else{
 
     t._turnOf = null;
     t.direction ();
    }
   // chrome
   } else if(e.wheelDelta) {
 
    if (e.wheelDelta > 0) {
 
     t._turnOf = &#39;forward&#39;;
 
     t.direction ();
 
    } else{
 
     t._turnOf = null;
     t.direction ();
 
    }
   }
  },
 
  //判断是否长点击
  longPress: function(e, moveFun ) {
 
   var t = this;
 
   if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
    e = e || window.event;
 
    // 限制为鼠标左键点击才触发
    if (/^mouse/.test(e.type) && e.which !== 1) {
     return;
    }
   }
 
   t._setintervalId = setInterval(function(){
 
    t._mousedownTimer += 10;
 
    if( t._mousedownTimer >= 100 ){
 
     moveFun();
    }
 
   },20);
  },
 
  mouseupFun: function(e, moveFun) {
    
   var t = this;
 
   if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
    e = e || window.event;
 
    // 限制为鼠标左键点击才触发
    if (/^mouse/.test(e.type) && e.which !== 1) {
     return;
    }
   }
 
   clearTimeout(t._setintervalId);
 
   if( t._mousedownTimer < 100 ) {
 
    moveFun();
   }
 
   t._mousedownTimer = 0;
  },
 
  direction:function() {
   var t = simulation,
    barTop = t._scroll.position().top,
    pageTop = t._wapper.position().top,
    moveDistance = {};
 
    if ( t._turnOf === &#39;forward&#39;) {
 
     //页面到顶，不执行任何操作
     if (barTop == 0) {
      return;
     }
 
     moveDistance = {
      page: pageTop + t._distance,
      bar: barTop - parameter.scrollDistance
     }
 
     //如果滚动条距离顶部的距离少 < 每次滚动的距离，或者已经滚动到顶部，则不再滚动
     if(barTop < parameter.scrollDistance || barTop <= 0){
 
      moveDistance = {
       page: 0,
       bar: 0
      }
     }
 
    } else {
 
     //页面到底，不执行任何操作
     if (barTop == parameter.barArea - parameter.scrollHeight){
      return;
     }
 
     moveDistance = {
      page: pageTop - t._distance,
      bar: barTop + parameter.scrollDistance
     };
 
     // 如果滚动条距离底部的距离值 < 每次滚动的距离 或者已经到底部，则一次滚到底
     if ( moveDistance.bar + parameter.scrollHeight >= parameter.barArea) {
 
      moveDistance = {
       page: parameter.view - parameter.page,
       bar: parameter.barArea - parameter.scrollHeight
      };
 
     }
    }
 
    t._scroll.css({top: moveDistance.bar});
    t._wapper.css({top: moveDistance.page});
  },
 
  //拖动滚动条
  liveEvent: function() {
   var t = this,
    draging = false,
    currentY = 0,
    lastY = 0,
    pageY = 0;
 
   //检测设备类型
   var _ua = function(e) {
 
    var Pos = null;
 
    if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
     e = e || window.event;
 
     // 限制为鼠标左键点击才触发
     if (/^mouse/.test(e.type) && e.which !== 1) {
      return;
     }
 
     Pos = {
      left : e.pageX,
      top: e.pageY
     }
 
    } else {
     Pos = {
      left : e.originalEvent.targetTouches[0].pageX,
      top: e.originalEvent.targetTouches[0].pageY
     }
    }
    return Pos;
   };
 
   var _start = function(e) {
 
    //监控鼠标
    e.preventDefault();
 
    if (t._scroll.get(0).setCapture) {
     t._scroll.get(0).setCapture();
    }
 
    draging = true;
 
    //记录当前滚动条的坐标
    lastY = t._scroll.position().top;
 
    //记录按下鼠标的坐标
    pageY = _ua(e).top;
   };
 
   var _drag = function(e) {
 
    if( draging ) {
 
     var pageTop = t._wapper.position().top;
     var barTop = t._scroll.position().top;
 
     //滚动条每移动1px，页面相对滚动Npx 再 * 当前滚动条的到顶部的距离
     var pageMoveDistance = -(parameter.page / (parameter.barArea / 1)) * barTop;
 
     if (lastY + ( _ua(e).top - pageY ) < 0) {
      currentY = 0;
      pageMoveDistance = 0;
 
     } else if( lastY + ( _ua(e).top - pageY) + parameter.scrollHeight >= parameter.barArea) {
      currentY = parameter.barArea - parameter.scrollHeight;
      pageMoveDistance = parameter.view - parameter.page;
     }
     else {
      currentY = lastY + ( _ua(e).top - pageY);
     }
 
     t._scroll.css({ top:currentY});
     t._wapper.css({top: pageMoveDistance});
    }
   };
 
   var _end = function(e) {
 
    if (draging) {
 
     draging = false;
 
     //在IE下释放对鼠标的控制
     if (t._scroll.get(0).setCapture) {
      t._scroll.get(0).releaseCapture();
     }
      
     document.onmousemove = null;
     document.onmouseup = null;
    }
   };
 
   t._scroll.bind( startWhen, _start );
 
   t._wapper.bind( startWhen, _start );
 
   $(document).bind( moveWhen, _drag );
    
   $(document).bind( endWhen, _end );
 
   $(document).bind(&#39;blur&#39;, _end);
  }
 }
 return simulation;
});

Copier après la connexion

Le ci-dessus se trouve la barre de défilement de la simulation javascript. Implémentez le code, j'espère que cela sera utile à l'apprentissage de chacun.

Pour plus d'articles liés au code d'implémentation de la barre de défilement personnalisée JavaScript, veuillez faire attention au site Web PHP chinois !