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

打印页面