解决移动端文本框被原生键盘弹出后挡住文本框

红太狼 2022-05-26 23:53 171阅读 0赞

## `Element.scrollIntoView()` ##

> [https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView][https_developer.mozilla.org_en-US_docs_Web_API_Element_scrollIntoView] 文章地址

语法

element.scrollIntoView();
    element.scrollIntoView(alignToTop); // Boolean parameter
    element.scrollIntoView(scrollIntoViewOptions); // Object parameter
    
    alignToTop (boolean)
    		true (default) 元素的顶部将对齐到可滚动祖先的可见区域的顶部。
    				对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}
    		false 元素的底部将与可滚动祖先的可见区域的底部对齐。
    				对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。
    
    scrollIntoViewOptions  (object)
    		behavior (定义的过渡动画)
    			"auto"，"instant"或"smooth"。默认为"auto"。
    		block 
    			一"start"，"center"，"end"，或"nearest"。默认为"center"。
    		inline 
    			一"start"，"center"，"end"，或"nearest"。默认为"nearest"。

## `Element.scrollIntoViewIfNeeded()` ##

这个是非标准的方法，只有在webkit内核的浏览器下才能执行，

参数
    	opt_center  (boolean)
    		如果true，元素将对齐，使其在可滚动祖先的可见区域内居中。
    		如果false，元素将与可滚动祖先的可见区域的最近边缘对齐。
    						根据可见区域的哪个边缘最靠近元素，
    						元素的顶部将与可见区域的顶部边缘对齐，
    						或者元素的底部边缘将与可见区域的底部边缘对齐。

以下转载地址https://blog.csdn.net/qq\_20353887/article/details/74331419

记一次，解决移动端文本框弹出键盘遮挡输入框的方法: 
    document.activeElement.scrollIntoViewIfNeeded();  
      
    方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。   
      
    使用方法：  
      
    var input= document.getElementById("input");  
      
    input.scrollIntoViewIfNeeded(true);  
      
    如果为true，则元素将在其所在滚动区的可视区域中居中对齐。  
    如果为false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。

[https_developer.mozilla.org_en-US_docs_Web_API_Element_scrollIntoView]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView