js - 原生的一些滚动属性和方法(scroll)

属性：

1，Element.scrollTop

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

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

语法：

// 获得滚动的像素数
var  intElemScrollTop = someElement.scrollTop;
// 设置滚动的距离
element.scrollTop = intValue;
1
2
3
4

2，Element.scrollHeight
Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的 padding，但不包括元素的 border 和 margin。scrollHeight 也包括 ::before 和 ::after这样的伪元素

3，Element.scrollLeft
Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离;
语法：

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;
1
2

sLeft是一个整数，代表元素滚动条距离元素左边多少像素。

//设置滚动条滚动了多少像素
element.scrollLeft = 10;
1
2

4，Element.scrollWidth
Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容。

scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如::before或::after。如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth;

语法：

var xScrollWidth = element.scrollWidth;
1

方法：

5，Element.scrollIntoView()
scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

语法：
element.scrollIntoView(true) 为默认滚动到元素的顶端，false为底端

element.scrollIntoView(); 等同于 element.scrollIntoView(true)
1

定义动画过渡效果（非必选）：

element.scrollIntoView({behavior: "smooth"});
1

定义动画过渡效果 和 垂直方向的对齐 和 水平方向的对齐：

element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
1

6，Element.scrollTo()
scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。

参数:

• x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
• y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。

语法：
behavior：‘smooth’ 是过渡效果；

element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

1
2
3
4
5
6

7，Element.scrollBy()
scrollBy() 方法是使得元素滚动一段特定距离；

语法：
与上面的scrollTo使用方法是一样的；

window.scrollBy( 0, 1000 );

element.scrollBy({
  top: 100,
  left: 100,
  behavior: 'smooth'
});
1
2
3
4
5
6
7

8，Window.scrollTo()
滚动到文档中的某个坐标。
语法：

window.scrollTo( 0, 1000 );

// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

1
2
3
4
5
6
7
8