An Ember component that remembers its scroll position.
npm install memory-scrollThis addon provides Ember modifiers and components that help you avoiding losing
the user's scroll positions unexpectedly as they navigate through the app.
``
pnpm add --save-dev memory-scroll
Example:
`gts
import memoryScroll from "memory-scroll/modifiers/memory-scroll";
`
memoryScroll does just two things: when its about to be
destroyed it saves its element's scroll position into a Service (which
is Ember's standard way to maintain long-lived application state). And
when it's just been rendered, it looks in the service to see if it
should set its scroll position.
The key attribute is mandatory and it determines what constitutes
"the same" element that should share memory. The simplest usage is
to use a constant string ID. A more advanced usage is to use part of
your model data so the memory is context-dependent, like:
` If instead you want to remember the scroll position of the document itself, you can use: Its key works the same way as This modifier always scrolls the document to the given position when it renders and when the key changes. Example: Example: All the rest is up to you, so it's easy to use as a drop-in The If instead you want to remember the scroll position of the document itself, you can use: Its key works the same way as This component always scrolls the document to the given position when it renders and when the key changes. Example:hbs
`rememberDocumentScroll
gts`
import rememberDocumentScroll from "memory-scroll/modifiers/remember-document-scroll";, but it reads and writes document.documentElement.scrollTop().`scrollTo
gts`
import scrollTo from "memory-scroll/modifiers/scroll-to";
Components
MemoryScroll
gts`
import MemoryScroll from "memory-scroll/components/memory-scroll";
{{#each items as |item|}}
{{item.name}}
{{/each}}
MemoryScroll does just two things: when its about to be
destroyed it saves its element's scroll position into a Service (which
is Ember's standard way to maintain long-lived application state). And
when it's just been rendered, it looks in the service to see if it
should set its scroll position.
replacement for any that is already styled for scrolling.key attribute is mandatory and it determines what constitutes`
"the same" component that should share memory. The simplest usage is
to use a constant string ID. A more advanced usage is to use part of
your model data so the memory is context-dependent, like:gts`RememberDocumentScroll
gts`
import RememberDocumentScroll from "memory-scroll/components/remember-document-scroll";, but it reads and writes document.documentElement.scrollTop().`ScrollTo
gts``
import ScrollTo from "memory-scroll/components/scroll-to";