滚动页面

滚动页面。

使用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);

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