利用JS實現(xiàn)scroll自定義滾動效果詳解

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:27:36

利用JS實現(xiàn)scroll自定義滾動效果詳解

利用JS實現(xiàn)scroll自定義滾動效果詳解:前言最近在公司開發(fā)項目的時候，原生滾動條中有些東西沒辦法自定義去精細(xì)的控制，于是開發(fā)一個類似于better-scroll一樣的瀏覽器滾動監(jiān)聽的JS實現(xiàn)，下面我們就來探究一下自定義滾動需要考慮哪些東西，經(jīng)過哪些過程。話不多說了，來一起看看詳細(xì)的介紹吧。選

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀利用JS實現(xiàn)scroll自定義滾動效果詳解:前言最近在公司開發(fā)項目的時候，原生滾動條中有些東西沒辦法自定義去精細(xì)的控制，于是開發(fā)一個類似于better-scroll一樣的瀏覽器滾動監(jiān)聽的JS實現(xiàn)，下面我們就來探究一下自定義滾動需要考慮哪些東西，經(jīng)過哪些過程。話不多說了，來一起看看詳細(xì)的介紹吧。選

前言

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

選擇滾動監(jiān)聽的事件

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

主要的實現(xiàn)業(yè)務(wù)邏輯

handleTouchMove(event){
 event.preventDefault();
 this.currentY = event.targetTouches[0].screenY;
 this.currentTime = new Date().getTime();
 // 二次及以上次數(shù)滾動（間歇性滾動）時間和路程重置計算，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;
 /*設(shè)置移動最小值*/
 temDis = temDis > this.minValue ? temDis * 1 / 3 : temDis;
 /*設(shè)置移動最大值*/
 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);
},

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

handleTouchEnd(event){
 /*點透事件允許通過*/
 if (!this.distance) return;
 event.preventDefault();
 let temDis = this.distance + this.oldY;
 /*計算緩動值*/
 temDis = this.computeSlowMotion(temDis);
 /*設(shè)置最小值*/
 temDis = temDis > this.minValue ? this.minValue : temDis;
 /*設(shè)置最大值*/
 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);
 // 判斷使用哪一種監(jiān)聽事件
 if (this.slowMotionFlag) {
 this.dispatchEventLoop();
 } else {
 this.dispatchEvent();
 }
 this.$el.addEventListener('transitionend', ()=> {
 window.cancelAnimationFrame(this.timer);
 });
 this.scrollFunc(event);
}

代碼解讀：這是touchend事件監(jiān)聽的回調(diào)，其中這里要判斷是否要攔截click和tap事件，并且這里還要計算慣性緩動值，設(shè)置最終的最大最小值，以及設(shè)置動畫效果和緩動效果。下面來談一下滾性滾動的計算：

// 計算慣性滾動值
computeSlowMotion(temDis){
 var duration = new Date().getTime() - this.startTime;
 // 300毫秒是判斷間隔的最佳時間
 var resetDistance = this.currentY - this.resetY;
 if (duration < 300 && Math.abs(resetDistance) > 10) {
 var speed = Math.abs(resetDistance) / duration,
 destination;
 // 末速度為0 距離等于初速度的平方除以2倍加速度
 destination = (speed * speed) / (2 * this.deceleration) * (resetDistance < 0 ? -1 : 1);
 this.slowMotionFlag = true;
 return temDis += destination;
 } else {
 this.slowMotionFlag = false;
 return temDis;
 }
},

代碼解讀：滾性滾動的算法主要是根據(jù)一個路程和時間計算出初速度，以及原生滾動的加速度的大于值0.006來計算滾動的總位移。這里主要還要判斷一下一個300ms的經(jīng)驗值。

總結(jié)

大概的流程和思考就是這樣了，后續(xù)還會增加更多的功能進(jìn)行擴(kuò)展

附上git地址：https://github.com/yejiaming/scroll

本地下載：http://xiazai.jb51.net/201710/yuanma/js-scroll-custom(jb51.net).rar

好了，

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com