線上直播原始碼，js獲取捲軸的位置

線上直播原始碼，js獲取捲軸的位置

一.獲取當前頁面捲軸縱座標的位置

document.body.scrollTop與document.documentElement.scrollTop

IE6/7/8/IE9及以上：

可以使用 document.documentElement.scrollTop；

Safari，Firefox:，Chrome：

可以使用 document.body.scrollTop;

二.js獲取網頁螢幕可視區域高度

document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

看了以上程式碼，可能會有疑問說body和可見區域到底有什麼不同呢，我們在console裡執行一下會發現在不同的網頁中有不同的情況值，有的document.body.clientWidth和document.documentElement.clientWidth 的值相同，有的卻不同，原因在哪呢？

原因就是：

在瀏覽器預設的情況下，body有8-10px左右的邊距，而可見區域包括了這個邊距，因此如果我們用到body{padding:0;margin:0;}來消除這種預設的情況。那麼document.body.clientWidth和document.documentElement.clientWidth 的值就會相同。

三.獲取文件完整高度

網頁正文全文寬：document.body.scrollWidth 基本等同於document.body.clientWidth

網頁正文全文高：document.body.scrollHeight 基本等同於document.body.clientHeight

案例：

滾到底部，載入下一頁資料

export default {
  data() {
    return {};
  },
  mounted() {
    //監聽並處理函式
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll(e) {
      if (
        this.getScrollTop() + this.getClientHeight() == this.getScrollHeight()
      ) {
        if (Math.ceil(this.total / this.limit > this.nextPage)) {
          this.nextPage += 1;
          this.getList();
        }
      }
    },
    //獲取當前捲軸的位置
    getScrollTop(){
        var scrollTop=0
        if(document.documentElement&&document.documentElement.scrollTop){
            scrollTop = document.documentElement.scrollTop
        }else if(document.body){
            scrollTop = document.body.scrollTop
        }
        return scrollTop
    },
    //獲取當前可視範圍的高度
    getClientHeight(){
        var clientHeight = 0
        if(document.body.clientHeight&&document.documentElement.clientHeight){
            clientHeight = Math.min(document.body.clientHeight,document.documentElement.clientHeight)
        }else{
            clientHeight = Math.max(document.body.clientHeight,document.documentElement.clientHeight)
        }
        return clientHeight
    },
    //獲取文件完整的高度
    getScrollHeight(){
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)
    }
  }
};

以上就是 線上直播原始碼，js獲取捲軸的位置，更多內容歡迎關注之後的文章