From f45afa65b253ffa8d460a8abbfaa4209e079b35a Mon Sep 17 00:00:00 2001 From: pan93412 Date: Wed, 2 Mar 2022 00:27:14 +0800 Subject: zh-tw/document/scroll_event: migrate to Markdown --- .../zh-tw/web/api/document/scroll_event/index.html | 103 --------------------- files/zh-tw/web/api/document/scroll_event/index.md | 103 +++++++++++++++++++++ 2 files changed, 103 insertions(+), 103 deletions(-) delete mode 100644 files/zh-tw/web/api/document/scroll_event/index.html create mode 100644 files/zh-tw/web/api/document/scroll_event/index.md diff --git a/files/zh-tw/web/api/document/scroll_event/index.html b/files/zh-tw/web/api/document/scroll_event/index.html deleted file mode 100644 index 26dbb7640c..0000000000 --- a/files/zh-tw/web/api/document/scroll_event/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: scroll -slug: Web/API/Document/scroll_event -translation_of: Web/API/Document/scroll_event ---- -

當文件的可視區或元素被滾動(scroll)，scroll事件會被觸發

- -

一般資訊

- -
-
規範
-
DOM L3, CSSOM View
-
介面
-
UIEvent
-
Bubbles
-
Not on elements, but bubbles to the default view when fired on the document
-
Cancelable
-
No
-
Target
-
defaultView, Document, Element
-
Default Action
-
None
-
- -

屬性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
- -

Example

- -

因為 scroll 事件是高頻觸發，這樣的事件處理程式不該進行運算成本高的程式，像是DOM的修改。所以，建議使用 requestAnimationFrame, setTimeout 或 customEvent 如下所示

- -

Scroll optimization with window.requestAnimationFrame

- -
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
-
-var last_known_scroll_position = 0;
-var ticking = false;
-
-function doSomething(scroll_pos) {
-  // do something with the scroll position
-}
-
-window.addEventListener('scroll', function(e) {
-  last_known_scroll_position = window.scrollY;
-  if (!ticking) {
-    window.requestAnimationFrame(function() {
-      doSomething(last_known_scroll_position);
-      ticking = false;
-    });
-  }
-  ticking = true;
-});
- -

 

- -

關於resize事件的更多類似例子。

- -

瀏覽器相容性

- -

iOS UIWebView

- -

在iOS UIWebViews中，滾動捲軸時 scroll 事件不會觸發；它們要等到滾動完成時才被觸發。請參閱Bootstrap issue #16202。 Safari 和 WKWebViews 不受此bug的影響。

diff --git a/files/zh-tw/web/api/document/scroll_event/index.md b/files/zh-tw/web/api/document/scroll_event/index.md new file mode 100644 index 0000000000..26dbb7640c --- /dev/null +++ b/files/zh-tw/web/api/document/scroll_event/index.md @@ -0,0 +1,103 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +translation_of: Web/API/Document/scroll_event +--- +

當文件的可視區或元素被滾動(scroll)，scroll事件會被觸發

+ +

一般資訊

+ +
+
規範
+
DOM L3, CSSOM View
+
介面
+
UIEvent
+
Bubbles
+
Not on elements, but bubbles to the default view when fired on the document
+
Cancelable
+
No
+
Target
+
defaultView, Document, Element
+
Default Action
+
None
+
+ +

屬性

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Example

+ +

因為 scroll 事件是高頻觸發，這樣的事件處理程式不該進行運算成本高的程式，像是DOM的修改。所以，建議使用 requestAnimationFrame, setTimeout 或 customEvent 如下所示

+ +

Scroll optimization with window.requestAnimationFrame

+ +
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var last_known_scroll_position = 0;
+var ticking = false;
+
+function doSomething(scroll_pos) {
+  // do something with the scroll position
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+  }
+  ticking = true;
+});
+ +

 

+ +

關於resize事件的更多類似例子。

+ +

瀏覽器相容性

+ +

iOS UIWebView

+ +

在iOS UIWebViews中，滾動捲軸時 scroll 事件不會觸發；它們要等到滾動完成時才被觸發。請參閱Bootstrap issue #16202。 Safari 和 WKWebViews 不受此bug的影響。

-- cgit v1.2.3-54-g00ecf