前言

最近在公司開發項目的時候，原生滾動條中有些東西沒辦法自定義去精細的控制，于是開發一個類似于better-scroll一樣的瀏覽器滾動監聽的JS實現，下面我們就來探究一下自定義滾動需要考慮哪些東西，經過哪些過程。話不多說了，來一起看看詳細的介紹吧。

選擇滾動監聽的事件

因為是自定義手機端的滾動事件，那我選擇的是監聽手機端的三個touch事件來實現監聽，并實現了兩種滾動效果，一種是通過-webkit-transform，一種是通過top屬性。兩種實現對于滾動的基本效果夠能達到，可是top的不適合滾動中還存在滾動，可是能解決滾動中存在postion:fixed屬性的問題；而transform可以實現滾動中有滾動，可是又不能解決postion:fixed的問題，所以，最后選擇性考慮使用哪一種實現方式，用法一樣。

主要的實現業務邏輯

handleTouchMove(event){ event.preventDefault(); this.currentY = event.targetTouches[0].screenY; this.currentTime = new Date().getTime(); // 二次及以上次數滾動（間歇性滾動）時間和路程重置計算，0.05是間歇性滾動的停頓位移和時間比 if (Math.abs(this.currentY - this.lastY) / Math.abs(this.currentTime - this.lastTime) < 0.05) {  this.startTime = new Date().getTime();  this.resetY = this.currentY; } this.distance = this.currentY - this.startY; let temDis = this.distance + this.oldY; /*設置移動最小值*/ temDis = temDis > this.minValue ? temDis * 1 / 3 : temDis; /*設置移動最大值*/ temDis = temDis < -this.maxValue ? -this.maxValue + (temDis + this.maxValue) * 1 / 3 : temDis; this.$el.style["top"] = temDis + 'px'; this.lastY = this.currentY; this.lastTime = this.currentTime; this.dispatchEvent(); this.scrollFunc(event);},

代碼解讀：這是監聽touchmove事件的回調，其中主要計算出目標節點this.$el的top或者-webkit-transform中translateY的值，而計算的參考主要以事件節點的screenY的垂直移動距離為參考，當然其中還要判斷一下最大值和最小值，為了保證移動可以的超出最大值小值一定的距離所以加了一個1/3的移動計算。這里可能主要到了有一個間歇性滾動的判斷和計算，主要是服務于慣性滾動的，目的是讓慣性滾動的值更加精確。

handleTouchEnd(event){ /*點透事件允許通過*/ if (!this.distance) return; event.preventDefault(); let temDis = this.distance + this.oldY; /*計算緩動值*/ temDis = this.computeSlowMotion(temDis); /*設置最小值*/ temDis = temDis > this.minValue ? this.minValue : temDis; /*設置最大值*/ temDis = temDis < -this.maxValue ? -this.maxValue : temDis; this.$el.style["transitionDuration"] = '500ms'; this.$el.style["transitionTimingFunction"] = 'ease-out'; /*確定最終的滾動位置*/ setTimeout(()=> {  this.$el.style["top"] = temDis + 'px'; }, 0); // 判斷使用哪一種監聽事件 if (this.slowMotionFlag) {  this.dispatchEventLoop(); } else {  this.dispatchEvent(); } this.$el.addEventListener('transitionend', ()=> {  window.cancelAnimationFrame(this.timer); }); this.scrollFunc(event);}