ScrollSpy design RFC #4503
maxokorokov
started this conversation in
RFCs
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hey,
I've been playing with the ScrollSpy a little recently with implementation based on the
IntersectionObserver
. Here is the RFC for the API I came up with.1. ScrollSpy service
It can be started/stopped on any element or on the whole document. You can add/remove fragments to watch and be notified when a particular fragment becomes active.
You can configure
rootMargin
for theIntersectionObserver
and pass aChangeDetectorRef
that will be marked for check when active fragment changes.It also allows to scroll to a particular fragment manually.
Example 1 - Service usage
2. ScrollSpy directive
Allows to setup the
NgbScrollSpy
service on a particular element.Example 2 - Directive usage
3. Helper menu directives
NgbScrollSpyItem
andNgbScrollSpyNav
allow to handle.active
class changes and build hierarchical menus.Example 3.1 - Simple menu items
These will handle click and scrolling.
Example 3.2 - Simple menu links
These will not handle clicks and won't scroll, usually this will be done by the router.
Example 3.3 - Using items
Any individual item can be referenced
Example 3.4 - Complex menus
These will allow to build hierarchical highlighting. Can be applied to an arbitrary markup and bound either to a service via DI or to a particular instance of a ScrollSpy directive.
In this case parent-child relationships have to be esablished manually via the
parent
link andngbScrollSpyNav
group.cc @jnizet, @ExFlo, @divdavem, @fbasso
Beta Was this translation helpful? Give feedback.
All reactions