Sadrazam – Elem Showcase

DOM element utilities: computed styles, scroll control, resize observation, flash animation, and scroll-to-view

1. getStyle(el, styleProp)

Gets the computed style value of an element using window.getComputedStyle(). Returns the value as a string, or null if the element is not found.

Target

Styled Element

Click a button to get the computed style value

Code Sadrazam.Elem.getStyle(element, 'background-color')

2. disableScroll / enableScroll

Disables page scrolling while preserving scrollbar space via paddingRight. Supports nested calls — scroll is only re-enabled when all callers have called enableScroll().

Lock count: 0 — Scroll is enabled

Code Sadrazam.Elem.disableScroll() Sadrazam.Elem.enableScroll()

3. getScrollbarWidth()

Calculates the browser scrollbar width in pixels. The result is cached after the first call.

Click the button to measure

Code Sadrazam.Elem.getScrollbarWidth()

4. flash(element)

Briefly flashes the element with a background highlight animation (.is-flashing + sdrzm-flash keyframes). The class is removed automatically on animationend.

Target

Flash this element

Code Sadrazam.Elem.flash(element)

5. scrollToView(element, options?)

Smoothly scrolls the page to bring the target element into view. Accepts an optional margin (default: 10px) for top offset. Prevents over-scrolling past page boundaries.

Code Sadrazam.Elem.scrollToView(element) Sadrazam.Elem.scrollToView(element, { margin: 50 })

6. onElementHeightChange(element, callback)

Observes an element for resize events using ResizeObserver. Returns the observer instance — call .disconnect() to stop observing.

Resize me

Waiting for resize events...

Code const observer = Sadrazam.Elem.onElementHeightChange(el, callback)

Stop observer.disconnect()

7. Console Help

Run Sadrazam.Elem.help() in the browser console to see all available methods and their descriptions.

Code Sadrazam.Elem.help()

8. API Reference

All static methods available on Sadrazam.Elem

Method	Parameters	Returns	Description
getStyle(el, styleProp)	el: HTMLElement, styleProp: string	string \| null	Gets the computed style value of an element.
disableScroll()	—	void	Disables page scrolling. Supports nested calls.
enableScroll()	—	void	Re-enables page scrolling. Must be called once per disableScroll().
getScrollbarWidth()	—	number	Calculates the browser scrollbar width in pixels (cached).
flash(element)	element: HTMLElement	void	Briefly flashes the element with a background highlight.
scrollToView(el, options?)	el: HTMLElement, options?: { margin: number }	void	Smoothly scrolls the page to the specified element. Default margin: 10px.
onElementHeightChange(el, cb)	el: HTMLElement, cb: function	ResizeObserver \| null	Runs a callback when the element is resized. Returns the observer instance.
help()	—	void	Prints available methods to the console.

scrollToView target — you scrolled here!