原生js來寫獲取元素距離頂部距離,以及滾動條滾動指定距離和時間控制


這是我在寫vue項目里封裝的一個公共js類

里面還有一些其他的方法,一並拿過來了

class Public {
    isDesktop(){ //判斷是否為pc端
        return (window.screen.width > 1023) ? true : false;
    }

    /* 
      * formatMoney(s,type) 
      * 功能:金額按千位逗號分隔
      * 參數:s,需要格式化的金額數值. 
      * 參數:type,判斷格式化后的金額是否需要小數位. 
      * 返回:返回格式化后的數值字符串. 
    */ 
    formatMoney(s, type) {
        if (/[^0-9\.]/.test(s))
            return "0.00";
        if (s == null || s == "null" || s == "")
          return "0.00";
        s = s.toString().replace(/^(\d*)$/, "$1.");
        s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
        s = s.replace(".", ",");
        var re = /(\d)(\d{3},)/;
        while (re.test(s))
            s = s.replace(re, "$1,$2");
        s = s.replace(/,(\d\d)$/, ".$1");
        if (type == 0) {
          var a = s.split(".");
            if (a[1] == "00") {
                s = a[0];
            }
        }
        return s;
    }
    
    isWeiXin(){ //判斷是否是微信瀏覽器
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }
    //number :距離   time:時間
    ScrollTop(number,time){
        let _this = this;
        if (!time) {
            document.body.scrollTop = document.documentElement.scrollTop = number;
            return number;
        }
        const spacingTime = 20; // 設置循環的間隔時間  值越小消耗性能越高
        let spacingInex = time / spacingTime; // 計算循環的次數
        let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 獲取當前滾動條位置
        let everTop = (number - nowTop) / spacingInex; // 計算每次滑動的距離
        let scrollTimer = setInterval(() => {
            if (spacingInex > 0) {
                spacingInex--;
                _this.ScrollTop(nowTop += everTop);
            } else {
                clearInterval(scrollTimer); // 清除計時器
            }
        }, spacingTime);
    }
    
    getElementToPageTop(el) {//獲取元素距離頂部距離
        if(el == null){
            return
        }
        let _this = this;
        if(el.parentElement) {
          return _this.getElementToPageTop(el.parentElement) + el.offsetTop
        }
        return el.offsetTop
    }
    
}

export default Public

  項目里綜合起來用是ScrollTop()和getElementToPageTop()配合一起用

類似jquery里的scrollTop()方法

例:

var headerDiv = document.getElemetById("head");

ScrollTop(getElementToPageTop(headerDiv),1000)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM