scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动...

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内

element.scrollIntoView();  // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop);  // Boolean型参数  true 元素的顶端与可视区域顶端对齐，（相当于{block: "start"}） false 元素底端将与可视区域底端对齐（相当于{block: "end"}）
element.scrollIntoView(scrollIntoViewOptions);  // Object型参数 behavior: "auto"  | "instant" | "smooth"，behavior这个选项决定页面是如何滚动的，auto与instant都是瞬间跳到相应的位置，而smooth就是有动画的过程；block:"start" | "end"

===================================================================

element.scrollIntoView() 方法不但可以引起页面的垂直滚动，也可以引起页面的水平滚动，这个是合理的

实例

    
    
    
    
    


    

    

    
aaaa占位符占位符占位符
    

    

　　效果如下

另外，element.scrollIntoView()还会引起一些看似诡异但情理上说的过去的现象，比如 element是不可见的，将element放到overflow:hiden的容器或者将element设置为visibility: hidden;会改变原有布局

例如

    
    
    
    
    


    

    

    

        占位符占位符占位符占位符aaaa占位符占位符占位符
    
    

    

　　初始状态 #link在这个位置

 

scrollIntoView之后

 

　当我们改变容器的宽度再改回来，样式又恢复了

 

 

参考：

　　https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

　　https://www.jianshu.com/p/32bef36a68a0

　　

 

转载于:https://www.cnblogs.com/zhangtao1990/p/9388192.html