移動端刻度尺

移動端刻度尺

demo

• 解決滑動後慣性中止選擇刻度
• 兼容ios滾動條消失術

解決滑動後慣性中止選擇刻度

若是搜如何監測滾動條是否中止，那前幾條答案都是以下代碼，一個字都不帶改變的：

var topValue = 0,// 上次滾動條到頂部的距離  
        interval = null;// 定時器  
    document.onscroll = function() {  
        if(interval == null)// 未發起時，啓動定時器，1秒1執行  
            interval = setInterval("test()", 1000);  
        topValue = document.documentElement.scrollTop;  
    }  
  
    function test() {  
        // 判斷此刻到頂部的距離是否和1秒前的距離相等  
        if(document.documentElement.scrollTop == topValue) {  
            alert("scroll bar is stopping!");  
            clearInterval(interval);  
            interval = null;  
        }  
    } 
複製代碼

這個方法確實能夠監測到滾動條是否中止，可是在ios中你會發現，在滑動後慣性階段明顯能夠看到抖動，產生的緣由是，我將1s執行一次改爲200ms執行一次，那基本是每200ms都在執行一次 setInterval（document.documentElement.scrollTop == topValue一直會是true）。

防抖

看到這裏你們應該會想到用防抖來解決，
觸發高頻事件後n秒內函數只會執行一次，若是n秒內高頻事件再次被觸發，則從新計算時間

demo：

function debounce(fn) {
      let timeout = null; // 建立一個標記用來存放定時器的返回值
      return function () {
        clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
        timeout = setTimeout(() => { // 而後又建立一個新的 setTimeout, 這樣就能保證輸入字符後的 interval 間隔內若是還有字符輸入的話，就不會執行 fn 函數
          fn.apply(this, arguments);
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖
複製代碼

兼容ios滾動條消失術

.ageComponent__calibration::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}
複製代碼

css方案只能解決在安卓機的問題，ios上依然會出現，只能經過父元素遮蓋滾動條的原理來解決

ageComponent .OverflowEle {
    width: 100%;
    height: 65px;
    overflow: hidden;
}
.ageComponent__calibration {
    display: flex;
    width: 261px;
    /*width: 100%;*/
    height: 75px;
    overflow-y: hidden;
    overflow-x: scroll;
}
複製代碼

源碼地址

GitHub
若是對您有用，請給個star～