scrollTop

发表于

scrollTop

元素的scrollTop值是从元素顶部到其最顶部可见内容的距离的度量（An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content）。

注：overflow属性值为hidden的元素，改变元素的scrollTop值，可以触发滚动效果


document.compatMode

1
mode = document.compatMode
  • 如果文档处于“怪异模式”，则该属性值为"BackCompat"
  • 如果文档处于“标准模式”或者“准标准模式(almost standards mode)”，则该属性为"CSS1Compat"

注：还有另外一种渲染模式, Gecko的”准标准模式”, 该模式和标准规范模式的区别仅为表格单元内的图片布局方式不同. 且该模式的类型字符串仍为: “CSS1Compat”.


Document.scrollingElement

scrollingElement （ Document 的只读属性）返回滚动文档的 Element 对象的引用。

在标准模式（Standards Mode）下, 这是文档的根元素, document.documentElement.

当在怪异模式（Quirks Mode）下， scrollingElement 属性返回 HTML body 元素（若不存在返回 null ）。

注：document.body.scrollTop与document.documentElement.scrollTop同时只会有一个值生效。

1
let sTop = document.body.scrollTop || document.documentElement.scrollTop;


Window.scrollTo

1
2
3
4
5
6
7
8
9
// window.scrollTo(x-coord,y-coord )
window.scrollTo( 0, 1000 );

// window.scrollTo(options)
// 设置滚动行为改为平滑的滚动
window.scrollTo({ 
    top: 1000, 
    behavior: "smooth" 
});
  • x-coord 是文档中的横轴坐标。
  • y-coord 是文档中的纵轴坐标。
  • options 是一个包含三个属性的对象:
    • top 等同于 y-coord
    • left 等同于 x-coord
    • behavior 类型 String，表示滚动行为。
      • 支持参数 smooth(平滑滚动)，instant(瞬间滚动)
      • 默认值auto，实测效果等同于instant

注：window.scrollTo滚动的容器为document.documentElement


window.scrollBy

1
2
window.scrollBy(x-coord, y-coord);
window.scrollBy(options)

注：window.scrollBy的参数与window.scrollTo一样，但是window.scrollBy中的x-coord 、y-coord、top、left 可以是负值。window.scrollBy是以自身为参考点，window.scrollTo以浏览器窗口为参考点。