ScrollToOptions - 指定将元素滚动到的位置以及滚动是否应该平滑的字典

ScrollToOptions 是 CSSOM View 规范的字典，包含一些属性，这些属性指定将元素滚动到的位置以及滚动是否应该平滑。

可以试用 ScrollToOptions 字典作为以下方法的参数：

• Window.scroll()
• Window.scrollBy()
• Window.scrollTo()
• Element.scroll()
• Element.scrollBy()
• Element.scrollTo()

属性

ScrollToOptions.top

指定沿 Y 轴滚动窗口或元素的像素数。

ScrollToOptions.left

指定沿 X 轴滚动窗口或元素的像素数。

ScrollToOptions.behavior

指定滚动是应该平滑地进行动画制作，还是应该立即进行。

实例

在我们的 ScrollOptions 实例（查看在线实例），我们提供了一个表格，允许用户输入三个值 - 两个数字分别代表左属性和上属性（即沿 X 和 Y 轴滚动到的位置），以及一个复选框，指示是否要启用平滑滚动。

提交表单后，将运行事件处理程序，该事件处理程序将输入的值放入 ScrollToOptions 字典中，然后将字典作为参数传递调用 Window.ScrollTo() 方法：

form.addEventListener('submit', (e) => {
  e.preventDefault();
  var scrollOptions = {
    left: leftInput.value,
    top: topInput.value,
    behavior: scrollInput.checked ? 'smooth' : 'auto'
  }

  window.scrollTo(scrollOptions);
});

规范

规范	状态	备注
CSS Object Model (CSSOM) View Module ScrollToOptions 的定义	工作草案	-

桌面浏览器兼容性

移动浏览器兼容性