HTML | DOM scrollIntoView() 方法

scrollIntoView() 方法将指定元素滚动到浏览器窗口的可见区域。

句法：

document.getElementById("id").scrollIntoView(alignTo);

参数：

• alignTo：它是一个布尔类型参数，包含真或假值。默认值设置为 true。
  • true：将元素滚动到其窗口的顶部。
  • false：将元素滚动到其窗口底部。

  请注意，底层术语不是“顶部”或“底部”，我将在下一节中讨论。
  因此，这就像使用分配有窗口或元素的特定坐标的按钮在相应窗口中的元素之间悬停。

例子：

  

    
        #element {
            height: 200px;
            width: 350px;
            overflow: auto;
            background: green;
        }
          
        #content1 {
            margin: 500px;
            height: 100px;
            width: 1000px;
            background-color: white;
        }
          
        #content2 {
            margin: 500px;
            height: 50px;
            width: 1000px;
            background-color: grey;
        }
          
        #content3 {
            margin: 500px;
            height: 150px;
            width: 1000px;
            background-color: coral;
        }
    
    
        function myFunction1() {
            var e = document.getElementById("content1");
            e.scrollIntoView(false); // Makes the element 
        }
  
        function myFunction2() {
            var e = document.getElementById("content2");
            e.scrollIntoView(true);
        }
  
        function myFunction3() {
            var e = document.getElementById("content3");
            e.scrollIntoView(); // Default is true
        }
    

  

    
        GeeksforGeeks
        Scroll to element-1
        
        Scroll to element-2
        
        Scroll to element-3
        
        
  
        
            
              Click on the scroll button to see
              that elements in a click.
            
                Element-1
            
            
                Element-2
            
            
                Element-3
            
        
    

  

输出：

所以，在上面，项目之间的转换并不是平滑的，它只是在元素之间跳跃。
为了让它看起来很酷，对象参数在此用途中派上用场。

句法：

document.getElementById("id").scrollIntoView({
  behavior: smooth | auto;
  block: start | center | end | nearest;
  inline: start | center | end | nearest;
});

行为对象决定了滚动的平滑度，有两种模式“平滑”和“自动”。
块对象决定元素视图应该从块的哪个部分开始。
内联对象决定了视图应该从元素的哪个对齐开始。

例子：

  

    
        #element {
            height: 200px;
            width: 350px;
            overflow: auto;
            background: green;
        }
          
        #content1 {
            margin: 500px;
            height: 100px;
            width: 1000px;
            background-color: white;
        }
          
        #content2 {
            margin: 500px;
            height: 50px;
            width: 1000px;
            background-color: grey;
        }
    
    
        function myFunction1() {
            var e = document.getElementById("content1");
            e.scrollIntoView({
                block: 'start',
                behavior: 'smooth',
                inline: 'start'
            });
        }
  
        function myFunction2() {
            var e = document.getElementById("content2");
  
            // Ends the block to the window 
            // Bottom and aligns the view to the center 
            e.scrollIntoView({
                block: 'end',
                behavior: 'smooth',
                inline: 'center'
            });
        }
    

  

    
        GeeksforGeeks
        
          Scroll to element-1
      
        
        
          Scroll to element-2
      
        
        
        
  
        
            
              Click on the scroll button to 
              see that elements in a click.
          
            
                Element-1 aligned to start
            
            
                Element-2 aligned to center
            
        
    

  

输出：