zoukankan      html  css  js  c++  java
  • Element.scrollIntoView()

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

    语法

    element.scrollIntoView();  // 等同于element.scrollIntoView(true) 
    element.scrollIntoView(alignToTop);  // Boolean型参数 
    element.scrollIntoView(scrollIntoViewOptions);  // Object型参数

    参数

    alignToTop (Boolean型参数)

    1.如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。
    2.如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。

    scrollIntoViewOptions (Object型参数)

    {
        behavior: "auto"  | "instant" | "smooth",
        block:    "start" | "end",
    }

    1.如果是一个boolean,true 相当于{block: "start"},false 相当于{block: "end"}
    2.behavior这个选项决定页面是如何滚动的,实测auto与instant都是瞬间跳到相应的位置,而smooth就是有动画的过程

    示例

    var element = document.getElementById("box");
    
    element.scrollIntoView();
    element.scrollIntoView(false);
    element.scrollIntoView({block: "end"});
    element.scrollIntoView({block: "end", behavior: "smooth"});

    注意

    取决于其它元素的布局情况,此元素可能不会完全滚动到顶端或底端。

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

  • 相关阅读:
    文本溢出隐藏与定位
    css基本属性 内边距 外边距及盒模型
    CSS基本属性2
    CSS基本属性
    CSS入门
    表格与表单
    列表与图片
    html标签类型
    HashMap和HashTable
    Map接口
  • 原文地址:https://www.cnblogs.com/LeoXnote/p/11473690.html
Copyright © 2011-2022 走看看