From ae378c0aab28bc8ab71168c1ef3e33e4ea3845af Mon Sep 17 00:00:00 2001 From: MDN Date: Tue, 21 Sep 2021 00:49:44 +0000 Subject: [CRON] sync translated content --- .../conflicting/web/api/window/scroll/index.html | 73 ++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 files/zh-cn/conflicting/web/api/window/scroll/index.html (limited to 'files/zh-cn/conflicting') diff --git a/files/zh-cn/conflicting/web/api/window/scroll/index.html b/files/zh-cn/conflicting/web/api/window/scroll/index.html new file mode 100644 index 0000000000..b564a07814 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/window/scroll/index.html @@ -0,0 +1,73 @@ +--- +title: ScrollToOptions +slug: conflicting/Web/API/Window/scroll +translation_of: Web/API/ScrollToOptions +original_slug: Web/API/ScrollToOptions +--- +
{{ APIRef("CSSOM View") }}
+ +

CSSOM View 规范的 ScrollToOptions 字典(dictionary)当中的属性用于指定一个元素应该滚动到哪里,以及滚动是否应该平滑。

+ +

一个 ScrollToOptions 字典可以作为参数提供给下面的方法:

+ + + +

属性

+ +
+
{{domxref("ScrollToOptions.top")}}
+
指定 window 或元素 Y 轴方向滚动的像素数。
+
{{domxref("ScrollToOptions.left")}}
+
指定 window 或元素 X 轴方向滚动的像素数。
+
{{domxref("ScrollToOptions.behavior")}}
+
指定滚动是否应该平滑进行,还是立即跳到指定位置。该属性实际上定义在 ScrollOptions 字典上,它通过 ScrollToOptions 实现。
+
+ +

示例

+ +

在我们的 scrolltooptions 示例中(在线查看 ),包含一个表单,允许用户输入三个值——两个数值表示 left 和 top 属性(即沿 X 和 Y 轴方向滚动后的位置),以及一个表示是否开启平滑滚动的复选框。

+ +

当提交表单时,会运行事件监听器,该事件监听器会把输入的值写入 ScrollToOptions 字典,然后传入 {{domxref("Window.ScrollTo()")}} 方法,并调用:

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

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dictdef-scrolltooptions', 'ScrollToOptions')}}{{Spec2('CSSOM View')}}
+ +

浏览器兼容性

+ +
+ + +

{{Compat("api.ScrollToOptions", 10)}}

+
-- cgit v1.2.3-54-g00ecf