主頁 > 知識庫 > 解析瀏覽器的一些“滾動”行為鑒賞

解析瀏覽器的一些“滾動”行為鑒賞
熱門標(biāo)簽：電話機器人技術(shù) ok電銷機器人 高德地圖標(biāo)注商戶怎么標(biāo) 地圖標(biāo)注軟件打印出來 黃石ai電銷機器人呼叫中心 如何查看地圖標(biāo)注 惡搞電話機器人 欣鼎電銷機器人 效果 智能電銷機器人被禁用了么

最近挺忙的，這次抽空寫寫文陶冶下情操，瀏覽器滾動真的天天見日日見啦，比如你現(xiàn)在看的這篇文章，往下看就必須得滾動，這篇文章主要聊聊滾動相關(guān)的一些方法跟屬性，還有一些有趣的例子🎈 文章涉及到的方法或?qū)傩?/code>在文末會放鏈接，方便大家自行查閱！

分類

按照我的個人理解，滾動分全局滾動(瀏覽器窗口)跟局部滾動(自定義的盒子)，以下內(nèi)容絕大部分都是指全局滾動，局部滾動的話獲取指定的DOM再調(diào)用相應(yīng)的API即可✅

如何設(shè)置全局滾動條高度

最常用的方法：

window.scrollTo(0, 0);

// or
window.scrollTo({
  left: 0,
  top: 100
});

也可以利用相對滾動設(shè)置：

window.scrollBy(0, 0);

// or
window.scrollBy({
  left: 0,
  top: 100
});

或者利用scrollTop設(shè)置：

document.scrollingElement.scrollTop = 100;

注意：scrollTo跟scrollBy的參數(shù)是一樣的，區(qū)別就是scrollBy滾動距離是相對與當(dāng)前滾動條位置進行滾動✅

效果對比如下：


 

很明顯，前者就是把滾動高度設(shè)置成100，而后者是每次都增加100，這就是為什么稱之為相對滾動了✅

如何指定一個元素顯示在視窗

最常用的方法：

// 獲取元素的offsetTop(元素距離文檔頂部的距離)
let offsetTop = document.querySelector(".box").offsetTop;

// 設(shè)置滾動條的高度
window.scrollTo(0, offsetTop);

效果如下：

或者用錨點：

<a href="#box">盒子出現(xiàn)在頂部</a>
<div id="box"></div>

效果如下：

或者利用scrollIntoView進行展現(xiàn)：

document.querySelector(".box").scrollIntoView();

效果如下：
 

還可以指定元素的出現(xiàn)位置：

// start出現(xiàn)在視口頂部、center出現(xiàn)在視口中央、end出現(xiàn)在視口底部
document.querySelector(".box").scrollIntoView({
  block: "start" || "center" || "end"
});

效果如下：
 

如何設(shè)置滾動具有平滑的過渡效果利用每個方法的參數(shù)設(shè)置：

window.scrollTo({
  behavior: "smooth"
});

window.scrollBy({
  behavior: "smooth"
});

document.querySelector(".box").scrollIntoView({
  behavior: "smooth"
});

效果如下：
 

或者用css屬性設(shè)置：

html {
  scroll-behavior: smooth; // 全局滾動具有平滑效果
}

// 或者所有
* {
 scroll-behavior: smooth;
}

效果如下：
 

注意：設(shè)置了該屬性之后，所有方法都可以不用設(shè)置behavior參數(shù)了，二選一即可，因為都是控制當(dāng)前指定元素的滾動行為，所以錨點跳轉(zhuǎn)、設(shè)置scrollTop也具有平滑(smooth)的滾動行為✅

一些有趣的東西

1. scrollingElement

該對象可以非常兼容地獲取scrollTop、scrollHeight等屬性，在移動端跟PC端都屢試不爽🤞

還記得當(dāng)初寫這個兼容性方法：

let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

現(xiàn)在你只需要：

let scrollHeight = document.scrollingElement.scrollHeight;

因為在MDN中是這樣介紹它的：

標(biāo)準(zhǔn)模式返回documentElement，怪異模式返回body；

2. 滾動到底部

window.scrollTo({
  left: 0,
  top: document.scrollingElement.scrollHeight
});

// 如果你實在是懶的話...
window.scrollTo(0, 999999);

注意：平滑滾動到頂部或者底部自己加參數(shù)或者屬性即可✅

3. 判斷瀏覽器已滾動到底部

window.addEventListener("scroll", () => {
  let {
    scrollTop,
    scrollHeight,
    clientHeight
  } = document.scrollingElement;
  
  // 當(dāng)前滾動高度 + 視口高度 >= 文檔總高度
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log("已到達底部");
  }
});

效果如下：
 

函數(shù)節(jié)流

當(dāng)你沒加函數(shù)節(jié)流：

window.addEventListener("scroll", () => console.log("我在滾我在滾！"));

效果如下：
 

當(dāng)你加了函數(shù)節(jié)流之后：

window.addEventListener("scroll", throttle(() => console.log("我在滾我在滾！")));

效果如下：
 

throttle源碼：

function throttle(fn, interval = 500) {
  let run = true;

  return function () {
    if (!run) return;
    run = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      run = true;
    }, interval);
  };
}

用處：減少代碼執(zhí)行頻率✅

函數(shù)防抖

當(dāng)你加了函數(shù)防抖之后：

window.addEventListener("scroll", debounce(() => console.log("滾動結(jié)束！")));

效果如下：
 

debounce源碼：

function debounce(fn, interval = 500) {
  let timeout = null;

  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}

用處：判斷某個動作結(jié)束，如剛剛的滾動結(jié)束、input輸入結(jié)束等✅

解決IOS設(shè)備局部滾動不順暢(粘手)

除了瀏覽器原生滾動，自定義的滾動條都會出現(xiàn)這種情況，加以下屬性就可以解決：

.box {
  -webkit-overflow-scrolling: touch;
}

對比如下：
 


 

注意：要真機才能看到效果，這里指的局部滾動是指自己定義的盒子，然后設(shè)置overflow: auto || scroll;后的滾動行為；

滾動傳播

指有多個滾動區(qū)域，當(dāng)一個滾動區(qū)域滾動完之后，繼續(xù)滾動會傳播到到父區(qū)域繼續(xù)滾動的行為：

.box {
  overscroll-behavior: contain; // 阻止?jié)L動傳播
}

對比效果圖如下：
 

橫向滾動

移動端遇到此需求比較多，常用于圖片展示：

<ul>
  <li>
    <img src="">
  </li>
  // ...
</ul>

ul {
  white-space: nowrap; // 超出不換行
  overflow-x: auto;

  li {
    display: inline-block;

    img {
      display: block;
      width: 200px;
    }
  }
}

效果如下：
 

滾動結(jié)束后，強制滾動到指定元素

基于上面的例子，我們設(shè)置如下屬性：

ul {
  scroll-snap-type: x mandatory;
  
  li {
    scroll-snap-align: start;
  }
}

效果如下：
 

仔細看會發(fā)現(xiàn)，我們松手的時候，會將最近的元素滾動到最右邊（初始位置，對于Y軸來講就是頂部，X軸則是右邊）

也可以設(shè)置出現(xiàn)在中間：

li {
  scroll-snap-align: center;
}

效果如下：
 

這樣，一個簡易的輪播圖效果就出來啦！

還可以實現(xiàn)全屏滾動：
 

注意：該屬性會在你滾動完之后再做處理，也就是說你可以一下子從圖片1跳到圖片9✅

最后

以上涉及到的方法或?qū)傩?/code>文檔如下：

  1. scrollTo
  2. scrollBy
  3. scrollIntoView
  4. scrollingElement
  5. scroll-behavior
  6. -webkit-overflow-scrolling
  7. overscroll-behavior
  8. scroll-snap-type
  9. scroll-snap-align

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

標(biāo)簽：萍鄉(xiāng) 中山 聊城 盤錦 金昌 赤峰 綏化 阿壩

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《解析瀏覽器的一些“滾動”行為鑒賞》，本文關(guān)鍵詞  解析,瀏覽器,的,一些,滾動,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《解析瀏覽器的一些“滾動”行為鑒賞》相關(guān)的同類信息！
  • 本頁收集關(guān)于解析瀏覽器的一些“滾動”行為鑒賞的相關(guān)信息資訊供網(wǎng)民參考！

    • 四合一精品企业网站建设

    多一个网站就为企业多增加一条营销渠道

    ¥888元限时抢购

    QQ立即咨询快速购买

    企业400电话

    智能AI客服机器人
    ￥15000

    在线订购

    合计11份范本：公司章程+合伙协议+出资协议+合作协议+股权转让协议+增资扩股协议+股权激励+股东会决议+董事会决议

    推薦文章