滚动页面

滚动页面。

使用 window.scrollBy 指定页面基于当前位置的滚动 偏移量 。

正数坐标会朝页面的右下方滚动，负数坐标会滚向页面的左上方。

例子

// 向下滚动一屏
window.scrollBy(0, window.innerHeight);
// 向上滚动一屏
window.scrollBy(0, -window.innerHeight);

扩展阅读

除了接受 正负偏移量 ， window.scrollBy 还能接受 ScrollToOptions 作为配置。

ScrollToOptions 包含如下三个参数：

• top：y轴偏移量
• left：x轴偏移量
• behavior：滚动行为，支持参数： smooth (平滑滚动)， instant (瞬间滚动)。默认值 auto ，效果等同于 instant

ScrollToOptions 可以作为如下方法的配置：

• window.scroll()
• window.scrollBy()
• window.scrollTo()
• element.scroll()
• element.scrollBy()
• element.scrollTo()

接下来介绍其他几个滚动相关 API ：

window.scroll

指定页面需要滚动的绝对位置。

window.scroll(x-coord, y-coord)
window.scroll({
  top: 100,
  left: 100,
  behavior: 'smooth'

window.scrollTo

与 window.scroll 相同。

window.scrollByPages

滚动指定的页数。

该 API 仅在 Firefox 浏览器支持。

// 当前文档向下翻一页 
window.scrollByPages(1);
// 当前文档向上翻一页 
window.scrollByPages(-1);

window.scrollByLines

滚动指定的行数。

该 API 仅在 Firefox 浏览器支持。

// 当前页面向下翻五行
window.scrollByLines(5);