Implementierungscode für benutzerdefinierte JavaScript-Bildlaufleisten

Bei der Arbeit stoßen wir häufig auf Inhalte, die einen festgelegten Bereich überschreiten. Im Allgemeinen werden Bildlaufleisten verwendet, um den überschrittenen Inhalt zu scrollen und anzuzeigen.

Aber die Verwendung der Standard-Bildlaufleiste des Browsers wird von Produktmanagern oft abgelehnt, aber der Stil der Bildlaufleiste kann nicht mit CSS geändert werden. Glücklicherweise gibt es ein universelles js ^_^~~

online Es gibt verschiedene Plug-Ins, aber am bequemsten ist es, es selbst zu schreiben. Sie können es auch beim Spielen lernen und selbst genug Essen und Kleidung herstellen (*^__^*)

Diese drei Probleme bereiten mir große Sorgen:

1. Höhe der Bildlaufleiste

2. Wie weit sich die Bildlaufleiste jedes Mal bewegen soll, wenn auf die Auf- und Ab-Schaltflächen geklickt wird

3. 1 Pixel Scrollen pro Drag Bar, wie viel muss die Seite verschieben?

Das gesamte Framework sieht wahrscheinlich so aus:

Schauen wir uns zunächst die erste Frage an.

Da wir bereits die Höhe des Inhaltsbereichs, die visuelle Höhe des Inhalts und die Höhe des scrollbaren Bereichs der Bildlaufleiste kennen, ist der Inhaltsbereich proportional zur Entfernung jeder Bewegung von Die Bildlaufleiste, also das erste Problem, ist leicht zu lösen:

Beweglicher Bereich der Bildlaufleiste / Höhe der Bildlaufleiste = Höhe des Inhalts / Höhe des sichtbaren Inhalts

Wie weit soll sich die Bildlaufleiste jedes Mal bewegen? Der Button wurde angeklickt?

Hier stelle ich einen Wert für den Parameter Abstand ein, um festzulegen, wie weit der Inhaltsbereich bei jedem Klick auf die Schaltfläche gescrollt werden soll. Wenn Sie diesen Wert ändern, kann sich die Bildlaufgeschwindigkeit des Inhaltsbereichs ändern. Wenn Sie bessere Verarbeitungsmethoden und Vorschläge haben, teilen Sie mir dies bitte mit um das Scrollen zu berechnen. Wie weit sollten sich die Balken relativ zueinander bewegen?

Der bewegliche Bereich der Bildlaufleiste / die Entfernung, um die sich die Bildlaufleiste jedes Mal bewegt = die Höhe des Inhaltsbereichs / wie weit sich der Inhaltsbereich jedes Mal bewegt

Der Effekt ist wie folgt:

Hier gibt es ein weiteres Problem, nämlich dass man zwischen einem einzelnen Klick und einem langen Druck unterscheiden muss.

Sie müssen also die Zeit vom Drücken der Taste bis zum Loslassen beurteilen. Sie ist derzeit auf

Um wie viel muss sich der Inhaltsbereich beim Ziehen der Bildlaufleiste pro 1 Pixel Bewegung der Bildlaufleiste verschieben?

Ermitteln Sie zunächst, wie viel Prozent des beweglichen Bereichs der Bildlaufleiste jede 1PX-Entfernung ausmacht, und dividieren Sie dann die Höhe des Inhaltsbereichs durch den erhaltenen Prozentsatz, um die relative Bildlaufentfernung des Inhaltsbereichs für jede 1PX-Bewegung des Bildlaufs zu erhalten Bar. .

Bildlaufentfernung des Inhaltsbereichs = Höhe des Inhaltsbereichs/(Bildlaufbereich der Bildlaufleiste/1)

Der vollständige Code der Demo lautet wie folgt:

Hinweis: Da es in Seajs geschrieben ist, achten Sie bitte ein wenig auf das Laden der Datei

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;}

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,
 });
});

js:

define(function(require, exports, module) {
 
 'use strict';
 
 var $ = require('lib/jquery/1.11.x/index.js');
 
 var parameter = null;
 
 //检测设备类型
 var startWhen, endWhen, moveWhen;
 var u = navigator.userAgent;
 
 if ( u.match(/\b(Windows\sNT|Macintosh)\b/) ) {
  // 鼠标
  startWhen = 'mousedown';
  endWhen = 'mouseup';
  moveWhen = 'mousemove';
 } else {
  // 触摸屏
  startWhen = 'touchstart';
  endWhen = 'touchend';
  moveWhen = 'touchmove';
 }
 
 var simulation = {
 
  _mousedownTimer: 0,
  _setintervalId: 0,
  _longClick: false, //是否长点击
  _turnOf: null, //滚动方向
 
  init: function(options) {
 
   var t = this;
 
   t._scroll = $('.scroll'); //滚动条
 
   t._wapper = options.wapper.find('.area'); //内容区域
   t._distance = options.distance; //点击上下按钮页面每次滚动的距离
 
   var forward = $('.forward'),
    middle = $('.middle'),
    backward = $('.backward');
 
   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;
});

The Oben ist die Bildlaufleiste für die Javascript-Simulation. Implementieren Sie den Code. Ich hoffe, er wird für das Lernen aller hilfreich sein.

Weitere Artikel zum Implementierungscode für benutzerdefinierte JavaScript-Bildlaufleisten finden Sie auf der chinesischen PHP-Website!