HTML - DOM 元素 scrollIntoView() 方法

scrollIntoView 方法確保網頁或可滾動容器上的特定元素透過調整滾動位置而可見。

語法

element.scrollIntoView(Options);

引數

引數	描述
選項	可用於自定義滾動行為的物件，包括平滑滾動、垂直和水平對齊的選項。

返回值

scrollIntoView() 方法不返回值。

HTML DOM 元素 'scrollIntoView()' 方法示例

以下是 scrollIntoView() 方法的一些示例，展示瞭如何在 HTML DOM 中使用它將元素滾動到網頁或可滾動容器中的檢視中。

使用自定義選項滾動到元素

此示例展示瞭如何使用 scrollIntoView() 方法將元素滾動到網頁或可滾動容器中的檢視中。以下程式碼包含一個具有固定高度和垂直滾動的<div> 元素；單擊按鈕時，它會將元素滾動到檢視中。

 <!DOCTYPE html>
<html lang="en">
<head>  
  <style>
    .con {
      height: 200px;
      overflow-y: scroll;
    }
    .item {
      height: 200px;
      margin-bottom: 20px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <h1>HTML DOM - Element</h1>
  <h2>scrollIntoView() Method</h2>
  <p>Scroll elements to view item3!!.</p>

  <div class="con">
    <div class="item" id="item1">Item 1</div>
    <div class="item" id="item2">Item 2</div>
    <div class="item" id="item3">Item 3</div>
    <div class="item" id="item4">Item 4</div>
  </div>

  <button onclick="scrollToItem('item3')">
  	Scroll to Item 3
   </button>

  <script>
    function scrollToItem(id) {
      const its = document.getElementById(id);
      its.scrollIntoView
      ({ behavior: 'smooth', block: 'center' });
    }
  </script>
</body>

</html>

滾動到頁面底部

此示例展示瞭如何使用 scrollIntoView() 方法將元素滾動到網頁或可滾動容器中的檢視中。它包含一個按鈕，單擊後會將頁面滾動到底部。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Scroll to Bottom Example</title>
</head>

<body>
    <h1>HTML DOM - Element</h1>
    <h2>scrollIntoView() Method</h2>
    <h1>Scroll to Bottom Example</h1>

    <p>Click the button below to scroll smoothly 
        to the bottom of the page:
    </p>

    <!-- Button to trigger scrolling -->
    <button onclick="scrollToBottom()">
        Scroll to Bottom
    </button>

    <div style="height: 2000px;">
        Scroll up to see the button
    </div>

    <script>
        // Function to scroll to the bottom 
        function scrollToBottom() {      
            const be = document.body; 
            be.scrollIntoView
            ({behavior:'smooth',block:'end'});
        }
    </script>
</body>

</html>

在容器內水平滾動

此示例展示了 scrollIntoView() 方法的使用，將元素滾動到網頁或可滾動容器中的檢視中。以下程式碼允許在容器內水平滾動。單擊按鈕以滾動到第三個專案。

<!DOCTYPE html>
<html lang="en">
<head>  
  <style>
    .con {
      width: 300px;  
      white-space: nowrap;  
      overflow-x: scroll;  
    }
    .item {
      display: inline-block;
      width: 250px; 
      height: 150px;  
      margin-right: 20px;
      background-color: #f0b0ff;
    }
  </style>
</head>

<body>
  <h1>HTML DOM - Element</h1>
  <h2>scrollIntoView() Method</h2>
  <p>Click Scroll elements to view item3!!.</p>
  <div class="con" id="con">
    <div class="item" id="item1">Item 1</div>
    <div class="item" id="item2">Item 2</div>
    <div class="item" id="item3">Item 3</div>
    <div class="item" id="item4">Item 4</div>
    <div class="item" id="item5">Item 5</div>
  </div>

  <button onclick="scrollToItem('item3')">
      Scroll to Item 3
  </button>

  <script>
    function scrollToItem(itemId) {
      const its = document.getElementById(itemId);
      its.scrollIntoView
    ({behavior:'smooth',inline:'end',block:'nearest' });
    }
  </script>
</body>

</html>

支援的瀏覽器

方法
scrollIntoView()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面