1、Element.scrollIntoView() 該方法讓當前元素滾動到瀏覽器視窗的可是區域內； ...
1、Element.scrollIntoView()
該方法讓當前元素滾動到瀏覽器視窗的可是區域內；
2、語法:
element.scrollIntoView();//等同於element.scrolIntoView(true)
element.scrollIntoView(alignToTop);//Boolean型參數
element.scrollIntoView(scrollIntoViewOptions);//Object型參數
參數
alignToTop:true--- 元素的頂端和器所在滾動區的可視區域頂端對齊
true 相當於{block:start}
false--- 元素的底端將和其所在滾動區的可視區域底端對齊
false 相當於{block:end}
scrollIntoViewOptions：一個boolean值或一個帶有選項的object
{
behavior:'auto' | 'instant'|'smooth',
block:'start' | 'end'
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>scrollToView的學習</title> 6 <style> 7 #containers{ 8 background-color: black; 9 width:300px; 10 height:50px; 11 display: flex; 12 justify-content: space-around; 13 position: fixed; 14 left:42.1%; 15 } 16 .clear{ 17 height:50px; 18 } 19 .title{ 20 color: #ffffff; 21 } 22 #title1-item,#title2-item,#title3-item{ 23 width:300px; 24 height:800px; 25 border:1px solid #dddddd; 26 margin: auto; 27 margin-bottom: 20px; 28 box-sizing: border-box; 29 padding-top: 50px; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="containers"> 35 <div data-target="#title1-item" class="title">商品</div> 36 <div data-target="#title2-item" class="title">詳情</div> 37 <div data-target="#title3-item" class="title">評價</div> 38 </div> 39 <div class="clear"></div> 40 <div id="title1-item">商品對應的部分</div> 41 <div id="title2-item">詳情對應的部分</div> 42 <div id="title3-item">評價對應的部分</div> 43 <script type="text/javascript"> 44 var aHref = document.getElementsByClassName('title'); 45 var title1Item = document.getElementById('title1-item'); 46 var title2Item = document.getElementById('title2-item'); 47 var title3Item = document.getElementById('title3-item'); 48 console.log(aHref[0]); 49 aHref[0].onclick=function(){ 50 title1Item.scrollIntoView(true); 51 52 }; 53 aHref[1].onclick=function(){ 54 title2Item.scrollIntoView(false); 55 56 }; 57 aHref[2].onclick=function(){ 58 title3Item.scrollIntoView(); 59 } 60 </script> 61 </body> 62 </html>
3、瀏覽器支持
scrollIntoViewOptions IE瀏覽器，Safari 不支持
IE8版本以下，Safari 5.0版本以下 不支持 "smooth" 屬性 和 "center" 設置項.
Firefox 36 不支持 "inline" 設置項。不支持設置項的值 "nearest" 或 "center"。
移動端：
scrollIntoViewOptions 會有一些低配版本的手機不支持
