html5裡面的scrollIntoView應用 2018.5.24

不傳參數的情況下 類似a錨點

如果傳參數 有2種格式 一種是布爾值 一種是對象 首先是布爾值：

如果傳true 元素的頂端将和其所在滾動區的可視區域的頂端對齊。若為false，元素的底端将和其所在滾動區的可視區域的底端對齊

對象的話  首先ie是不支援的

test.scrollIntoView({

block: 'start',

behavior: 'smooth'

});

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

另一個選項是behavior,MDN上給出三個可取的值，分别是auto、instant與smooth。這個選項決定頁面是如何滾動的，實測auto與instant都是瞬間跳到相應的#### 位置,smooth是有動畫效果的

下面是個例子：

<script>

const scrollIntoView = document.querySelector(".scrollIntoView");

const chunk = document.querySelector(".chunk");

const scrollIntoViewIfNeededT = document.querySelector(".scrollIntoViewIfNeeded-top");

const scrollIntoViewIfNeededB = document.querySelector(".scrollIntoViewIfNeeded-bottom");

scrollIntoView.addEventListener("click",fun,false);

scrollIntoViewIfNeededT.addEventListener("click",funa,false);

scrollIntoViewIfNeededB.addEventListener("click",funb,false);

function fun(){

chunk.scrollIntoView(true);

}

function funa(){

chunk.scrollIntoViewIfNeeded(true); //在看不到chunk 的情況下點選才有效 會居中

}

function funb(){

chunk.scrollIntoViewIfNeeded(false); //在看不到chunk 的情況下點選才有效 會在上面也可能下面 看哪邊離的近

}

</script>