亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

滾動(dòng)相關(guān)知識(shí)點(diǎn)總結(jié)

qieangel2013 / 2390人閱讀

摘要：頁(yè)面滾動(dòng)的總高度視口高度在不支持。滾動(dòng)到了頂部如何判斷滾動(dòng)到了最低部當(dāng)滾動(dòng)高度與視口高度之和，大于等于總高度時(shí)，則表示滾動(dòng)到了底部。一次需求中需要用到這些知識(shí)點(diǎn)，做了一個(gè)小小的總結(jié)以便記憶查詢，歡迎大家補(bǔ)充，多多交流，一起進(jìn)步。

獲取當(dāng)前滾動(dòng)高度

也就是頁(yè)面頂部超出視口的高度。

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

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

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

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

如何判斷滾動(dòng)到了頂部

當(dāng)scrollTop的值為0時(shí)，則滾動(dòng)到了頂部。

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

當(dāng)滾動(dòng)高度scrollTop與視口高度clientHeight之和，大于等于總高度scrollHeight時(shí)，則表示滾動(dòng)到了底部。

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

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

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

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

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

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

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

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("向下滾動(dòng)");
  } 

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

  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)
  }
}
應(yīng)用場(chǎng)景

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

一次需求中需要用到這些知識(shí)點(diǎn)，做了一個(gè)小小的總結(jié)以便記憶查詢，歡迎大家補(bǔ)充，多多交流，一起進(jìn)步。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92173.html

相關(guān)文章

  • JavaScript-Dom相關(guān)知識(shí)點(diǎn)

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

    XiNGRZ 評(píng)論0 收藏0

  • 垂直居中相關(guān)知識(shí)總結(jié)

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

    Labradors 評(píng)論0 收藏0

  • 垂直居中相關(guān)知識(shí)總結(jié)

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

    GeekGhc 評(píng)論0 收藏0

  • 移動(dòng)端布局與適配

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

    Clect 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<