From 23f02c0e71fc30436112d27c5d22ea9002b37e9c Mon Sep 17 00:00:00 2001 From: pan93412 Date: Wed, 2 Mar 2022 00:28:42 +0800 Subject: zh-tw/document/scroll_event: update source src: https://github.com/mdn/content/blob/2279e5a/files/en-us/web/api/document/scroll_event/index.md --- files/zh-tw/web/api/document/scroll_event/index.md | 146 +++++++++------------ 1 file changed, 65 insertions(+), 81 deletions(-) (limited to 'files/zh-tw') diff --git a/files/zh-tw/web/api/document/scroll_event/index.md b/files/zh-tw/web/api/document/scroll_event/index.md index 26dbb7640c..fd425ae6b4 100644 --- a/files/zh-tw/web/api/document/scroll_event/index.md +++ b/files/zh-tw/web/api/document/scroll_event/index.md @@ -1,103 +1,87 @@ --- -title: scroll +title: 'Document: scroll event' slug: Web/API/Document/scroll_event -translation_of: Web/API/Document/scroll_event +tags: + - API + - DOM + - Document + - Event + - Reference + - Scroll + - UIEvent +browser-compat: 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
-
- -

屬性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +{{APIRef}} + +The **`scroll`** event fires when the document view has been scrolled. For element scrolling, see {{domxref("Element/scroll_event", "Element: scroll event")}}. + +
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.
+ + + + + + + + + + + + + + + + + +
BubblesYes
CancelableNo
Interface{{DOMxRef("Event")}}
Event handler property + {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} +
-

Example

+> **Note:** In iOS UIWebViews, `scroll` events are not fired while scrolling is taking place; they are only fired after the scrolling has completed. See [Bootstrap issue #16202](https://github.com/twbs/bootstrap/issues/16202). Safari and WKWebViews are not affected by this bug. -

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

+## Examples -

Scroll optimization with window.requestAnimationFrame

+### Scroll event throttling -
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
+Since `scroll` events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("setTimeout()")}}, or a {{DOMxRef("CustomEvent")}}, as follows.
 
-var last_known_scroll_position = 0;
-var ticking = false;
+Note, however, that input events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. This example optimizes the`scroll` event for `requestAnimationFrame`.
 
-function doSomething(scroll_pos) {
-  // do something with the scroll position
+```js
+// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+let lastKnownScrollPosition = 0;
+let ticking = false;
+
+function doSomething(scrollPos) {
+  // Do something with the scroll position
 }
 
-window.addEventListener('scroll', function(e) {
-  last_known_scroll_position = window.scrollY;
+document.addEventListener('scroll', function(e) {
+  lastKnownScrollPosition = window.scrollY;
+
   if (!ticking) {
     window.requestAnimationFrame(function() {
-      doSomething(last_known_scroll_position);
+      doSomething(lastKnownScrollPosition);
       ticking = false;
     });
+
+    ticking = true;
   }
-  ticking = true;
-});
+}); +``` + +See more, similar examples on the [`resize`](/en-US/docs/Web/API/Window/resize_event) event page. + +## Specifications -

 

+{{Specifications}} -

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

+## Browser compatibility -

瀏覽器相容性

+{{Compat}} -

iOS UIWebView

+## See also -

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

+- [Element: `scroll` event](/en-US/docs/Web/API/Element/scroll_event) -- cgit v1.2.3-54-g00ecf