Show:

(require("SectionObserver"))(props) → {SectionObserver}

...
Observe intersection changes with the viewport for one or more elements. This is intended to be used with the headings in the content so that the corresponding section(s) in the table of contents can be "activated" (e.g. bolded). When sectionObserver notices a new intersection change, the `props.onIntersection` callback will be fired with the corresponding section as a param. Because sectionObserver uses a scroll event listener (in combination with IntersectionObserver), the changes are throttled to a default maximum rate of 200ms so that the main thread is not excessively blocked. IntersectionObserver is used to asynchronously calculate the positions of the observed tags off the main thread and in a manner that does not cause expensive forced synchronous layouts.
Parameters:
Name Type Description
props SectionObserverProps
Source:
Returns:
Type
SectionObserver

Members

(inner) current :HTMLElement|undefined

...
Type:
Source:

(inner) timeoutId :number|undefined

...
Type:
  • number | undefined
Source:

Methods

(inner) calcIntersection()

...
Calculate the intersection of each observed element.
Source:

(inner) pause()

...
Pauses intersection observation until `resume` is called.
Source:

(inner) resume()

...
Resumes intersection observation.
Source:

(inner) setElements(list)

...
Set a list of HTML elements to observe for intersection changes.
Parameters:
Name Type Description
list NodeList
Source:

(inner) unmount()

...
Cleans up event listeners and intersection observer. Should be called when the observer is permanently no longer needed.
Source:

Type Definitions

initSectionObserver(props) → {SectionObserver}

...
Parameters:
Name Type Description
props SectionObserverProps
Source:
Returns:
Type
SectionObserver

OnIntersection(element)

...
Parameters:
Name Type Description
element HTMLElement The section that triggered the new intersection change.
Source:

SectionObserver

...
Type:
  • Object
Properties:
Name Type Description
calcIntersection calcIntersection
pause pause
resume resume
unmount unmount
setElements setElements
Source:

SectionObserverProps

...
Type:
  • Object
Properties:
Name Type Attributes Description
elements NodeList A list of HTML elements to observe for intersection changes. This list can be updated through the `elements` setter.
onIntersection OnIntersection Called when a new intersection is observed.
topMargin number <optional>
 The number of pixels to shrink the top of the viewport's bounding box before calculating intersections. This is useful for sticky elements (e.g. sticky headers). Defaults to 0 pixels.
throttleMs number <optional>
 The number of milliseconds that the scroll handler should be throttled.
Source: