前端好用API之scrollIntoView
阿新 • • 發佈:2022-03-02
前情
在前端開發需求中,經常需要用到錨點功能,以往都是獲取元素在滾動容器中的位置再設定scrollTop來實現的。
scrollIntoView介紹
scrollIntoView()
方法將呼叫它的元素滾動到瀏覽器視窗的可見區域
呼叫方式:
var element = document.getElementById("test"); element.scrollIntoView(); // 等同於element.scrollIntoView(true) element.scrollIntoView(alignToTop); //布林引數 element.scrollIntoView(scrollIntoViewOptions); //物件引數
alignToTop引數說明:
alignToTop | [可選],目前之前這個引數得到了良好的支援 |
---|---|
true(預設值) | 元素的頂部將對齊到可滾動祖先的可見區域的頂部。對應於scrollIntoViewOptions: {block: "start", inline: "nearest"}。 |
false | 元素的底部將與可滾動祖先的可見區域的底部對齊。對應於scrollIntoViewOptions: {block: "end", inline: "nearest"}。 |
scrollIntoViewOptions引數說明:
scrollIntoViewOptions | [可選],目前這個引數瀏覽器對它的支援並不好 |
---|---|
behavior | [可選]定義過渡動畫。"auto","instant"或"smooth"。預設為"auto" |
block | [可選]"start","center","end"或"nearest"。預設為"center" |
inline | [可選]"start","center","end"或"nearest"。預設為"nearest" |
元素可能無法完全滾動到頂端或底端,例如滾動區域不夠滾的時候則無法滾動到頂端
使用示例
好好學習!天天向上!<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> *{ padding: 0; margin: 0; } .container{ width: 100%; height: 300px; overflow-x: hidden; overflow-y:auto; } .item{ width:100%; height: 100px; line-height: 100px; margin-bottom: 10px; text-align: center; color: #fff; background-color: green; } .button{ padding: 15px; } </style> </head> <body> <div class="container"> <div class="item">第1條</div> <div class="item">第2條</div> <div class="item">第3條</div> <div class="item">第4條</div> <div class="item">第5條</div> <div class="item">第6條</div> <div class="item">第7條</div> </div> <button class="button">跳轉到第1條</button> <button class="button">跳轉到第5條</button> <script> var items = document.querySelectorAll('.item'); var button = document.querySelectorAll('.button'); button[0].addEventListener('click', function(){ items[0].scrollIntoView(); }, false); button[1].addEventListener('click', function(){ items[4].scrollIntoView(); }, false); </script> </body> </html>