今天我們來使用scrollIntoView() 方法來將元素滾動到視口的指定位置，
假設有一個元素串列，并且希望某個元素滾動到視口頂部，在沒有scrollIntoView() 之前我們可能會用錨點鏈接，或者使用JavaScript去計算，然后去設定元素的scrollTop值來實作滾動，
現在我們可以使用 Element.scrollIntoView()方法，
語法
element.scrollIntoView() 接受一個布林值或一個物件：
element.scrollIntoView(alignToTop);
或者
element.scrollIntoView(options);
該方法接受下面的兩個引數
alignToTop
alignToTop 是一個布林值，
如果設定為 true，則該方法會將元素的頂部與視口的頂部或可滾動元素的可見區域的頂部對齊，
如果將 alignToTop 設定為 false，則該方法會將元素的底部與視口的底部或可滾動元素的可見區域的底部對齊，
alignToTop 默認為 true，
options
options 引數是一個物件，它可以更好地控制視圖中元素的對齊方式，但是，瀏覽器支持可能略有不同，
options物件有以下屬性：
behavior屬性定義了過渡影片，behavior屬性接受兩個值： auto 或 smooth，默認為 auto，
block 屬性定義了垂直對齊方式，它接受四個值中的一個： start, center, end或 nearest，默認為start，
inline 屬性定義了水平對齊方式，同業也接受四個值中的一個： start, center, end或 nearest，默認為nearest，
scrollIntoView() 例子
假設我們有一個HTML頁面，其中有一個包含所有編程語言的串列：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS scrollIntoView 示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button class="btn">Scroll Into View</button>
<ul>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>C#</li>
<li>Go</li>
<li>Visual Basic</li>
<li>JavaScript</li>
<li>PHP</li>
<li>SQL</li>
<li>R</li>
<li>Swift</li>
<li class="special">JavaScript</li>
<li>MATLAB</li>
<li>Assembly language</li>
<li>Ruby</li>
<li>PL/SQL</li>
<li>Classic Visual Basic</li>
<li>Perl</li>
<li>Scratch</li>
<li>Objective-C</li>
</ul>
</div>
<script>
let btn = document.querySelector('.btn');
let el = document.querySelector('.special');
btn.addEventListener('click', function () {
el.scrollIntoView(true, {
behavior: 'smooth'
});
});
</script>
</body>
</html>
頁面展示：
如果不滾動，我們看不到<li class="special">JavaScript</li>的串列項，當點擊Scroll Into View按鈕時，串列會滾動到JavaScript的串列項，
點擊此處查看在線示例
要將 JavaScript 串列項與視圖底部對齊，將 false 值傳入 scrollIntoView() 方法：
let btn = document.querySelector('.btn');
let el = document.querySelector('.special');
btn.addEventListener('click', function() {
el.scrollIntoView(false);
});
總結
今天我們學習了如何使用 scrollIntoView()方法將元素滾動到指定的視口，注意不同瀏覽器的支持情況不同，使用之前需測驗，
一起學習更多前端知識，微信搜索【小帥的編程筆記】，每天更新
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/349642.html
標籤：其他
上一篇：VUE 常用指令
下一篇：java版Spring Cloud+Spring Boot+mybatis+uniapp b2b2c 多商戶入駐商城品牌管理