scrollIntoView 與 scrollIntoViewIfNeeded API 介紹

時間 2019-11-07

標籤 scrollintoview scrollintoviewifneeded api 介紹简体版

原文原文鏈接

Hello~親愛的觀衆老爺們你們好！國慶中秋長假快放完了，是時候收拾心（ti）情（zhong）好好學習與工做啦。此次爲你們帶來的是兩個好用 API 的介紹，其實也是偷懶神器。前端

根據 MDN的描述，Element.scrollIntoView()方法讓當前的元素滾動到瀏覽器窗口的可視區域內。git

而Element.scrollIntoViewIfNeeded（）方法也是用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。但若是該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動。此方法是標準的Element.scrollIntoView()方法的專有變體。github

於是再有什麼回到頂部、去到置頂位置和鍵盤彈出擋住輸入框之類的需求，均可以簡單解決了。瀏覽器

然而，面對好用的 API，前端們第一個反映都是，看兼容性！bash

先看scrollIntoView的：學習

看到一片黃黃綠綠的，基本能夠安心，不支持的只是某個屬性的取值而已，下面會有介紹~動畫

以後看看scrollIntoViewIfNeeded：ui

IE和FireFox全紅，若是PC端想用的話，基本只能內部項目了，略爲惋惜。但移動端仍是綠悠悠的，基本都OK，能夠安心使用~spa

因爲本文是介紹向~於是每一個屬性我都寫了點小demo，點進去就能夠體驗一下哦！3d

scrollIntoView

先介紹scrollIntoView,使用起來其實很簡單，獲取某個元素後，直接調用scrollIntoViewIfNeeded()便可，簡單的demo點這就好，點一下側邊的小綠塊，頁面就會滾上去。demo代碼大概長這樣：

<body>
    <div class="chunk"></div>
    <div class="btn">click</div>
    <script>
    const btn = document.querySelector('.btn');
    const test = document.querySelector('.chunk');
    btn.addEventListener('click', function() {
      test.scrollIntoView();
    })
    </script>
</body>複製代碼

是否是很簡單~不過可能有同窗就有疑問了，這不就和錨點定位同樣嗎？感受毫無心義啊！先別急，當你調用scrollIntoView的時候，實際上是能夠傳參數進去的。scrollIntoView只接受一個參數，但接受兩種類型的參數，分別是Boolean型參數和Object型參數。

先說Boolean型參數，顧名思義，參數可使true和false。若是爲true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。若爲false，元素的底端將和其所在滾動區的可視區域的底端對齊。簡單的例子能夠點這裏。主要代碼以下：

<body>
    <div class="chunk"></div>
    <div class="btn-top">up</div>
    <div class="btn-bottom">down</div>
    <script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click', function() {
      test.scrollIntoView(true);
    });
    down.addEventListener('click', function() {
      test.scrollIntoView(false);
    });
    </script>
</body>複製代碼

如你所見到的，當傳入參數爲分別爲true與false時，當點擊右側的按鈕時，紅色的div會貼近可視區域的頂部或底部。

以後是Object型參數，這個對象有兩個選項，也就是對象裏面的key。block與以前的Boolean型參數一致，不過值再也不是true和false，是更語義化的start和end。

另外一個選項是behavior,MDN上給出三個可取的值，分別是auto、instant與smooth。這個選項決定頁面是如何滾動的，實測auto與instant都是瞬間跳到相應的位置，查閱W3C後發現了這麼一句:"The instant value of scroll-behavior was renamed to auto."。於是基本能夠肯定二者表現是一致的。而smooth就是有動畫的過程，惋惜的是以前說起兼容性時說過，黃色其實不支持某個屬性，就是不支持behavior取值爲smooth。並且，實測了IE及移動端的UC瀏覽器後發現，它們根本就不支持Object型參數，於是在調用scrollIntoView({...})時，只有默認的結果，即scrollIntoView(true)。簡單的例子看這裏，若是想體驗smooth的效果，須要使用Chrome或者Firefox哦！主要代碼以下：

<body>
    <div class="chunk"></div>
    <div class="btn-top">up</div>
    <div class="btn-bottom">down</div>
    <script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click', function() {
      test.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });
    });
    down.addEventListener('click', function() {
      test.scrollIntoView({
        block: 'end',
        behavior: 'smooth'
      });
    });
    </script>
</body>複製代碼

scrollIntoViewIfNeeded

介紹完scrollIntoView，是時候介紹一下它的變體scrollIntoViewIfNeeded了。二者主要區別有兩個。首先是scrollIntoViewIfNeeded是比較懶散的，若是元素在可視區域，那麼調用它的時候，頁面是不會發生滾動的。其次是scrollIntoViewIfNeeded只有Boolean型參數，也就是說，都是瞬間滾動，沒有動畫的可能了。

scrollIntoViewIfNeeded能夠接受一個Boolean型參數，和scrollIntoView不一樣，true爲默認值，但不是滾動到頂部，而是讓元素在可視區域中居中對齊；false時元素可能頂部或底部對齊，視乎元素靠哪邊更近。簡單的例子能夠點這裏。大體代碼以下：

<body>
    <div class="chunk"></div>
    <div class="scrollIntoView">scrollIntoView top</div>
    <div class="scrollIntoViewIfNeeded-top">scrollIntoViewIfNeeded top</div>
    <div class="scrollIntoViewIfNeeded-bottom">scrollIntoViewIfNeeded botom</div>
    <script>
    const scrollIntoView = document.querySelector('.scrollIntoView');
    const scrollIntoViewIfNeededTop = document.querySelector('.scrollIntoViewIfNeeded-top');
    const scrollIntoViewIfNeededBottom = document.querySelector('.scrollIntoViewIfNeeded-bottom');
    const test = document.querySelector('.chunk');
    scrollIntoView.addEventListener('click', function() {
      test.scrollIntoView(true);
    });
    scrollIntoViewIfNeededTop.addEventListener('click', function() {
      test.scrollIntoViewIfNeeded(true);
    });
    scrollIntoViewIfNeededBottom.addEventListener('click', function() {
      test.scrollIntoViewIfNeeded(false);
    });
    </script>
</body>複製代碼

如文檔所說，當紅色的div徹底在可視區域的狀況下，調用scrollIntoView()是會發生滾動，而調用scrollIntoViewIfNeeded()則不會。而我實踐後發現了一些文檔沒有的細節。當元素處於可視區域，但不是所有可見的狀況下，調用scrollIntoViewIfNeeded()時，不管參數是true仍是false，都會發生滾動，並且效果是滾動到元素與可視區域頂部或底部對齊，視乎元素離哪端更近。這個你們須要注意一下~