MDN之Web API 接口参考(一)【Element.scrollIntoView()和Element.scrollTop】

待我称王封你为后i 2021-06-26 16:06 483阅读 0赞

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

## 语法 ##

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

**参数**  
**alignToTop**  
一个`Boolean`值：

*  如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 `scrollIntoViewOptions: {block: "start", inline: "nearest"}`。这是这个参数的默认值。
 *  如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的`scrollIntoViewOptions: {block: "end", inline: "nearest"}`。

**`scrollIntoViewOptions`** 可选  
一个带有选项的`object`：

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

**`behavior`** 可选  
定义缓动动画， “`auto`”, “`instant`”, 或 “`smooth`” 之一。默认为 “`auto`”。

**`block`** 可选  
“start”, “`center`”, “`end`”, 或 "`nearest`"之一。默认为 “`start`”。

**`inline`** 可选  
“`start`”, “`center`”, “`end`”, 或 "`nearest`"之一。默认为 “`nearest`”。

示例

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

## 注意 ##

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

--------------------

## `Element.scrollTop` ##

`Element.scrollTop` 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 `scrollTop` 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 `scrollTop` 值为`0`。

## 语法 ##

// 获得滚动的像素数
    var  intElemScrollTop = someElement.scrollTop;

运行此代码后， `intElemScrollTop` 是一个整数，即`element`的内容向上滚动的像素数。

// 设置滚动的距离
    element.scrollTop = intValue;

`scrollTop` 可以被设置为任何整数值，同时注意：

*  如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"`non-scrollable`"属性）， `scrollTop`将被设置为`0`。
 *  设置`scrollTop`的值小于`0`，`scrollTop` 被设为`0`
 *  如果设置了超出这个容器可滚动的值, `scrollTop`会被设为最大值.

## 例子 ##

![在这里插入图片描述][20190617095526212.png]  
![在这里插入图片描述][20190617095539421.png]  
![在这里插入图片描述][20190617095553460.png]

[20190617095526212.png]: /images/20210626/4255f9a946e04724a9acb7c7e5d2d4a7.png
[20190617095539421.png]: /images/20210626/a1933f93e64e4600840d96684ffb4193.png
[20190617095553460.png]: /images/20210626/52ef5e43ef7b475b9aae85c0ada634d4.png