HLive - Scroll

Overview

Two small, related helpers cover the two ways you'd normally reach for scroll control in JavaScript. ScrollIntoView calls the browser's element.scrollIntoView() on the element you attach it to. ScrollTop sets an element's scrollTop directly to a pixel value — useful for a scrollable container rather than the page itself. Neither removes itself automatically, so if you don't want the scroll to repeat on the next unrelated render, remove the attribute once it's done its job.

API

hlivekit.ScrollIntoView(alignToTop bool) l.Attributer — scroll this element into view.
hlivekit.ScrollIntoViewRemove(tag l.Adder) — remove the scroll-into-view attribute.
hlivekit.ScrollTop(val int) l.Attributer — set this element's scrollTop to val pixels.
hlivekit.ScrollTopRemove(tag l.Adder) — remove the scroll-top attribute.

Use case

After a form fails validation, scroll the first invalid field into view so the user notices the error without hunting for it. Or, after re-sorting a long scrollable results panel, reset it to the top with ScrollTop(0) so the new order starts from a known position instead of an arbitrary scroll offset from the old one.

Code sample

errorField.Add(l.PreventDefault(), l.On("submit", func(ctx context.Context, e l.Event) {
	if !valid() {
		errorField.Add(hlivekit.ScrollIntoView(true))
		errorField.Add(l.OnOnce("focus", func(ctx context.Context, _ l.Event) {
			hlivekit.ScrollIntoViewRemove(errorField)
		}))

		return
	}

	// ...
}))

resultsPanel.Add(l.On("click", func(ctx context.Context, e l.Event) {
	resort()
	resultsPanel.Add(hlivekit.ScrollTop(0))
}))

← Element Visibility Redirect →