国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

滾動相關知識點總結

qieangel2013 / 2333人閱讀

摘要：頁面滾動的總高度視口高度在不支持。滾動到了頂部如何判斷滾動到了最低部當滾動高度與視口高度之和，大于等于總高度時，則表示滾動到了底部。一次需求中需要用到這些知識點，做了一個小小的總結以便記憶查詢，歡迎大家補充，多多交流，一起進步。

獲取當前滾動高度

也就是頁面頂部超出視口的高度。

function getScrollTop() {
  return document.body.scrollTop || document.documentElement.scrollTop;
}

document.documentElement獲取到的是html標簽。IE支持，chrome目前也支持。
document.body獲取到的是body標簽。chrome/ff支持。

頁面滾動的總高度
function getScrollHeight() {
  return document.body.scrollHeight || document.documentElement.scrollHeight;
}
視口高度
function getClientHeight() {
  return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}

window.innerHeight在IE8-不支持。并且會受到initial-scale縮放的影響。因此需要取一個max值。

如何判斷滾動到了頂部

當scrollTop的值為0時，則滾動到了頂部。

if (getScrollTop() === 0) {
  // 滾動到了頂部
}
如何判斷滾動到了最低部

當滾動高度scrollTop與視口高度clientHeight之和，大于等于總高度scrollHeight時，則表示滾動到了底部。

var curHeight = getScrollTop() + getClientHeight();
if (curHeight >= getScrollHeight()) {
  // 滾動到了底部
}
如何判斷滾動方向
var preTop = 0;
var curTop = 0;
var timer = null;

document.addEventListener("scroll", () => {
  clearTimeout(timer);
  curTop = getScrollTop();

  if (curTop > preTop) {
    console.log("向下滾動");
  } 

  if (curTop < preTop) {
    console.log("向上滾動");
  }

  timer = setTimeout(() => {
    preTop = curTop;
  }, 10);
  
}, !1);
函數節(jié)流

降低函數的觸發(fā)頻率。

原理是通過閉包與setTimeout，緩存一個timer值。 當timer值不為null時，阻止操作重復執(zhí)行。每一次操作執(zhí)行完畢，將timer設置為null。這樣下一次操作將不會受到阻止。如果我們需要調節(jié)執(zhí)行頻率，只需要改變setTimeout的延遲時間即可。

const throttle = (fn, delay) => {
  let timer = null;
  let isFrist = true;  // 第一次直接執(zhí)行

  return function() {
    const args = [].slice.call(arguments);
    const self = this;

    if (timer) {
      return false;
    }

    if (isFrist) {
      fn.apply(self, args);
      isFrist = false;
    }

    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
      fn.apply(self, args);
    }, delay || 500)
  }
}

demo代碼

var preTop = 0;
var curTop = 0;
var timer = null;

document.addEventListener("scroll", throttle(() => {
  clearTimeout(timer);
  curTop = getScrollTop();
  console.log(document.documentElement.scrollTop, document.documentElement.scrollHeight);

  if (getScrollTop() + getClientHeight() >= getScrollHeight()) {
    console.log("到底了兄弟.");
  }

  if (curTop > preTop) {
    console.log("向下滾動");
  } 

  if (curTop < preTop) {
    console.log("向上滾動");
  }

  timer = setTimeout(() => {
    preTop = curTop;
  }, 10);
}, 300), !1);


console.log("視口高度: ", window.innerHeight, document.documentElement.clientHeight);


function getScrollTop() {
  return document.body.scrollTop || document.documentElement.scrollTop;
}

function getScrollHeight() {
  return document.body.scrollHeight || document.documentElement.scrollHeight;
}

function getClientHeight() {
  return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}

function log() {
  console.log("xxx");
}

function throttle(fn, delay) {
  let timer = null;
  let isFrist = true;  // 第一次直接執(zhí)行

  return function() {
    const args = [].slice.call(arguments);
    const self = this;

    if (timer) {
      return false;
    }

    if (isFrist) {
      fn.apply(self, args);
      isFrist = false;
    }

    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
      fn.apply(self, args);
    }, delay || 500)
  }
}
應用場景

滾動加載更多 | 滾動判斷某些元素的顯示與隱藏 | 視差滾動特效 等。

一次需求中需要用到這些知識點，做了一個小小的總結以便記憶查詢，歡迎大家補充，多多交流，一起進步。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92173.html

相關文章

  • JavaScript-Dom相關知識點

    摘要：并提供相對于它左上角的坐標。屬性還包括滾出隱藏部分，例如沒有水平滾動，等于大多數幾何屬性是只讀的，但可以更改，瀏覽器將滾動元素。元素的滾動部分的寬度高度注意點如果一個元素不能被滾動例如，它沒有溢出，或者這個元素有一個屬性，將被設置為。 主旨 用來記錄和總結學的知識點，以便溫故知新 說明 這么寫方便自己記憶 記憶點 節(jié)點相關 Dom節(jié)點獲取 getElement (Id,Class...

    XiNGRZ 評論0 收藏0

  • 垂直居中相關知識總結

    摘要：垂直居中相關知識總結前言工作中用到了很多關于垂直居中相關的知識之前，在上提問了個問題關于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關知識總結 前言 工作中用到了很多關于垂直居中相關的知識之前，在SF上提問了個問題CSS關于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結一下。 方法總結 一、絕對定...

    Labradors 評論0 收藏0

  • 垂直居中相關知識總結

    摘要：垂直居中相關知識總結前言工作中用到了很多關于垂直居中相關的知識之前，在上提問了個問題關于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關知識總結 前言 工作中用到了很多關于垂直居中相關的知識之前，在SF上提問了個問題CSS關于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結一下。 方法總結 一、絕對定...

    GeekGhc 評論0 收藏0

  • 移動端布局與適配

    摘要：實戰(zhàn)之微信錢包騰訊服務界面網格布局是讓開發(fā)人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務界面 CSS3網格布局是讓開發(fā)人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。 移動端頁面適配—...

    Clect 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<