您正位於 MDN Web Docs 的可編輯版本

以 MDN Web Docs 使用者身分檢視: https://developer.mozilla.org/zh-TW/docs/Web/API/ScrollToOptions

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

The ScrollToOptions dictionary of the CSSOM View spec contains properties specifying where an element should be scrolled to, and whether the scrolling should be smooth.

A ScrollToOptions dictionary can be provided as a parameter for the following methods:

Properties

ScrollToOptions.top
Specifies the number of pixels along the Y axis to scroll the window or element.
ScrollToOptions.left
Specifies the number of pixels along the X axis to scroll the window or element.
ScrollToOptions.behavior
Specifies whether the scrolling should animate smoothly, or happen instantly in a single jump. This is actually defined on the ScrollOptions dictionary, which is implemented by ScrollToOptions.

Examples

In our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the X and Y axes), and a checkbox indicating whether they want smooth scrolling enabled or not.

When the form is submitted, an event handler is run that puts the entered values into a ScrollToOptions dictionary, and then invokes the Window.ScrollTo() method, passing the dictionary as a parameter:

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

  window.scrollTo(scrollOptions);
});

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'ScrollToOptions' in that specification.
Working Draft

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ScrollToOptionsChrome Full support 45Edge Full support 79Firefox Full support YesIE No support NoOpera Full support 32Safari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support YesSamsung Internet Android Full support 5.0
behaviorChrome Full support 45Edge Full support 79Firefox Full support YesIE No support NoOpera Full support 32Safari Full support Yes
Notes
Full support Yes
Notes
Notes Safari does not have support for the smooth scroll behavior.
WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support Yes
Notes
Full support Yes
Notes
Notes Safari does not have support for the smooth scroll behavior.
Samsung Internet Android Full support 5.0
leftChrome Full support 45Edge Full support 79Firefox Full support YesIE No support NoOpera Full support 32Safari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support YesSamsung Internet Android Full support 5.0
topChrome Full support 45Edge Full support 79Firefox Full support YesIE No support NoOpera Full support 32Safari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support 32Safari iOS Full support YesSamsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

文件標籤與貢獻者

此頁面的貢獻者: Ambar, mfluehr, mdnwebdocs-bot, wbamberg, chrisdavidmills
最近更新: Ambar,