SRefocusFeature
This feature allows you to automatically visually refocus an element that is inside a scrollable one on different trigger(s) like events, etc... This feature will occurs on these actions:
- At page display, check the anchor and refocus if found an element with the correct id
- At some events like: popstate, hashchange and pushstate.
- Note that the "pushstate" event is emitted by a proxies
history.pushStatemethod. - In order to make the refocus happend, your pushed state MUST have the
scrollproperty totrue - On any events specified in the
props.triggerproperty using this syntax:event:click, etc...
Preview
Import
Install
Interface
-
trigger[]
- event:eventName
- anchor
- history
Array<String>Specify some trigger(s) on which to refocus a particular element like
event:actual,anchor,history, etc... -
timeout500Number
Specify a timeout to wait before refocus the element
-
durationNumber
Specify the duration of the refocus animation
-
easingFunction
Specify the easing function of the refocus animation
-
focusedClassfocusedString|Boolean
Specify the class to add when the target element has been focused
-
focusedClassDuration1000Number
Specify how many ms the focused class has to be added, then removed
-
offsetNumber
Specify the offset of the refocus animation in px
-
offsetXNumber
Specify the offset x of the refocus animation in px
-
offsetYNumber
Specify the offset y of the refocus animation in px
-
align
- start
- center
- end
StringSpecify the alignment of the refocus animation
-
justify
- start
- center
- end
StringSpecify the justification of the refocus animation