spz-observer#

#When to Use

• When you need to observe whether scrolling has exceeded or not exceeded a boundary.
• When you need to observe whether a target element is still visible after scrolling.
• When you need to observe the current direction of scrolling.
• When you need to observe if there are updates to child elements.
• When you need to observe if the target element is visible on the first screen.

Note: The following events can be used simultaneously.

#Observing Whether Scrolling Exceeds a Given Boundary

Properties

Events

#scrollExceedBoundary

This event is automatically triggered when scrolling exceeds the given boundary value.

#scrollNotExceedBoundary

This event is automatically triggered when scrolling does not exceed the given boundary value (triggered after scrolling).

Code Demonstration

<spz-observer
  layout="logic"
  value="500"
  @scrollExceedBoundary="..."
  @scrollNotExceedBoundary="..."
></spz-observer>

<spz-observer
  layout="logic"
  value="window.outerHeight"
  @scrollExceedBoundary="..."
  @scrollNotExceedBoundary="..."
></spz-observer>

#Observing If the Target Element is Visible After Scrolling

Properties

Events

#scrollToVisible

This event is automatically triggered when an element scrolls from being invisible to visible in the viewport area.

#scrollToInvisible

This event is automatically triggered when an element scrolls from being visible to invisible in the viewport area.

Code Demonstration

<spz-observer
  layout="logic"
  target="sticky-buttons"
  @scrollToVisible="..."
  @scrollToInvisible="..."
></spz-observer>

#Observing Scroll Direction

Events

#scrollUp

This event is automatically triggered when the window scrolls upwards from its current position.

#scrollDown

This event is automatically triggered when the window scrolls downwards from its current position.

Code Demonstration

<spz-observer
  layout="logic"
  @scrollDown="..."
  @scrollUp="..."
></spz-observer>

#Observing if the Target Element is Visible on the First Screen

Properties

Events

#visibleInFirstScreen

This event is automatically triggered when the target element is visible on the first screen.

#invisibleInFirstScreen

This event is automatically triggered when the target element is not visible on the first screen.

Code Demonstration

<spz-observer
  layout="logic"
  target="buyNow"
  @visibleInFirstScreen="..."
  @invisibleInFirstScreen="..."
></spz-observer>

#Observing if There are Updates to Child Elements of the Target

Uses MutationObserver to observe the subtree and childList attributes. Refer to MutationObserver.

Properties

Events

#childUpdated

This event is automatically

triggered when additions or deletions occur in the entire subtree rooted at the target element.

Code Demonstration

<spz-observer
  layout="logic"
  target="header-menu"
  @childUpdated="..."
></spz-observer>

#Methods

#restart

Re-initialize, no parameters required. (All events are supported)

#AI Summary (LLM Ready)

• Component ID: spz-observer
• One-line purpose: Observes whether certain specific conditions are met and automatically triggers corresponding events.
• Detected attribute rows: 0
• Detected method subsections: 1
• Detected event subsections: 0
• Top attribute names: none (needs manual completion)
• Top method names: restart
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/