scrollIntoView 让元素滚动到视口 顶部 底部 中间

 

element的接口

partial interface Element {
  DOMRectList getClientRects();
  [NewObject] DOMRect getBoundingClientRect();
  void scrollIntoView(optional (boolean or ScrollIntoViewOptions) arg);
  void scroll(optional ScrollToOptions options);
  void scroll(unrestricted double x, unrestricted double y);
  void scrollTo(optional ScrollToOptions options);
  void scrollTo(unrestricted double x, unrestricted double y);
  void scrollBy(optional ScrollToOptions options);
  void scrollBy(unrestricted double x, unrestricted double y);
  attribute unrestricted double scrollTop;
  attribute unrestricted double scrollLeft;
  readonly attribute long scrollWidth;
  readonly attribute long scrollHeight;
  readonly attribute long clientTop;
  readonly attribute long clientLeft;
  readonly attribute long clientWidth;
  readonly attribute long clientHeight;
};

 原生的dom对象scrollIntoView方法就是让这个滑进视口参数 boolean 或者 ScrollIntoViewOptions

enum ScrollLogicalPosition { "start", "center", "end", "nearest"};dictionary ScrollIntoViewOptions
 : ScrollOptions { ScrollLogicalPosition block = "start"; ScrollLogicalPosition inline = "nearest";};

写法

demo.scrollIntoView({block:"start"})//开始位置
    demo.scrollIntoView({block:"center"})//中间位置
    demo.scrollIntoView({block:"end"})//末尾位置

demo 

    
    
    
    
    
    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
11
        
12
        
13
        
demo
        
15
        
16
        
17
        
18
        
19
        
20