scrollTo()和scrollBy()的区别

scrollTo(xpos,ypos)
参数描述
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
scrollBy(xnum,ynum)
参数描述
xnum 必需。把文档向右滚动的像素数。
ynum 必需。把文档向下滚动的像素数。

分别解释一下scrollTo()和scrollBy()

  • scrollTo(xpos,ypos) 是滚动到某个绝对位置,即滚动到坐标为xpos,ypos的位置。
  • scrollBy(xnum,ynum) 则是从当前位置滚动到某个相对位置,从当前位置起向右和向下滚动多少像素。
举个例子 在浏览器中运行下面的测试页面。按F12,在console控制台分别多次输入下面scrollBy和scrollTo,就可以很清楚的发现2者的区别:每一次执行scrollBy是当前的滚动条位置向下滚动10px,而执行scrollTo都是将元素滚动到指定位置,即和第一次是一样的位置。
window.scrollBy(0,10)和window.scrollTo(0,10)

 js中scroll滚动相关

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。

一.元素相关

这四个属性,全部是只读属性

其中,无非就是分为宽高左上
两个方向。

1.scrollHeight 和 scrollWidth

  • 使用scrollHeight和scrollWidth属性返回元素的高度,单位为px,包括padding
  • scrollHeight 和 scrollWidth返回的数值是包括当前不可见部分的。
  • scrollHeight 和 scrollWidth 属性为只读属性

2.scrollLeft 和 scrollTop

  • 需要一个监听方法
  • 还存在浏览器兼容问题

二.窗口相关

1.window对象的scrollBy() 和scrollTo()

1.scrollBy(x,y)

scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量。

scrollBy(0, 200) ==> 使得滚动条Y轴的位置,在当前的基础上增加200。比如:当前Y轴位置为0,执行后便是200;当前为100,执行后便是300。

  • 要使此方法工作 window 滚动条的可见属性必须设置为true!

2.scrollTo(x,y)

scrollTo(xpos,ypos)

  • xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
  • ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

scrollTo(x,y)方法:滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的

故乡明
原文地址:https://www.cnblogs.com/luweiweicode/p/15303458.html