scroll-stash

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="./node_modules/@vrembem/base/dist/styles.css"> <link rel="stylesheet" href="./node_modules/@vrembem/utility/dist/styles.css"> <link rel="stylesheet" href="./node_modules/@vrembem/dialog/dist/styles.css"> <link rel="stylesheet" href="./node_modules/@vrembem/menu/dist/styles.css"> <title>scroll-stash</title>  <style> [data-scroll-stash] { position: relative; } .page { height: 100vh; overflow: auto; } .example { max-width: 48em; } .is-active { background: #fff !important; } </style> </head> <body> <div id="page" class="page" data-scroll-stash="page" data-scroll-stash-anchor="false"> <div class="gap-y-lg padding-xl"> <header class="gap-y-sm"> <h1 class="font-size-lg">scroll-stash</h1> <p>A JavaScript plugin to help preserve an element's scroll position.</p> </header> <hr class="sep"> <div class="example gap-y"> <div class="gap-y-sm"> <h2 id="example-api">API</h2> <ul class="list"> <li><button class="link js-api-init"><code class="code">api.init</code></button></li> <li><button class="link js-api-destroy"><code class="code">api.destroy</code></button></li> </ul> </div> </div> <div class="example gap-y"> <div class="gap-y-sm"> <h2 id="example-1">Example 1</h2> <p>Basic implementation should stash scroll position.</p> <ul class="list"> <li><button class="link js-api-anchor-show"><code class="code">api.anchorShow</code></button></li> <li><button class="link js-api-anchor-get"><code class="code">api.anchorGet</code></button></li> </ul> </div> <div class="scroll-box background-shade-dark" style="height: 14em;" data-scroll-stash="example-1"> <ul class="menu margin"> <li class="menu__item"> <a href="#" class="menu__action">1: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">2: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">3: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">4: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">5: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">6: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">7: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">8: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">9: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">10: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">11: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">12: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">13: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">14: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">15: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">16: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">17: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">18: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">19: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">20: Menu Item</a> </li> </ul> </div> </div> <div class="example gap-y"> <div class="gap-y-sm"> <h2 id="example-2">Example 2</h2> <p>Scroll position should be preserved but will scroll to the nearest anchor if it's not currently visible.</p> <ul class="list"> <li><button class="link js-api-anchor-show"><code class="code">api.anchorShow</code></button></li> <li><button class="link js-api-anchor-get"><code class="code">api.anchorGet</code></button></li> </ul> </div> <div class="scroll-box background-shade-dark" style="height: 14em;" data-scroll-stash="example-2"> <ul class="menu margin"> <li class="menu__item"> <a href="#" class="menu__action">1: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">2: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">3: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">4: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">5: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">6: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">7: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">8: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">9: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action is-active">10: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">11: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">12: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">13: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">14: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">15: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">16: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">17: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">18: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">19: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">20: Menu Item</a> </li> </ul> </div> </div> <div class="example gap-y"> <div class="gap-y-sm"> <h2 id="example-3">Example 3</h2> <p>Scrolling anchor in view should take into account a sticky header and footer along with the set padding.</p> <ul class="list"> <li><button class="link js-api-anchor-show"><code class="code">api.anchorShow</code></button></li> <li><button class="link js-api-anchor-get"><code class="code">api.anchorGet</code></button></li> </ul> </div> <div class="scroll-box"> <div class="dialog background-shade-dark" style="height: 28em;" data-scroll-stash="example-3"> <div class="dialog__header background-shade-dark"> Dialog header... </div> <div class="dialog__body background-none"> <ul class="menu"> <li class="menu__item"> <a href="#" class="menu__action">1: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">2: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">3: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">4: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">5: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">6: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">7: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">8: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">9: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action is-active">10: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">11: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">12: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">13: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">14: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">15: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">16: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">17: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">18: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">19: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">20: Menu Item</a> </li> </ul> </div> <div class="dialog__footer background-shade-dark"> Dialog footer... </div> </div> </div> </div> <div class="example gap-y"> <div class="gap-y-sm"> <h2 id="example-4">Example 4</h2> <p>Using a custom anchor by providing a selector via <code class="code">data-scroll-stash-anchor</code> which overrides the anchor selector passed in options.</p> <ul class="list"> <li><button class="link js-api-anchor-show"><code class="code">api.anchorShow</code></button></li> <li><button class="link js-api-anchor-get"><code class="code">api.anchorGet</code></button></li> </ul> </div> <div class="scroll-box background-shade-dark" style="height: 14em;" data-scroll-stash="example-4" data-scroll-stash-anchor=".background-secondary"> <ul class="menu margin"> <li class="menu__item"> <a href="#" class="menu__action">1: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">2: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">3: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">4: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">5: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">6: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">7: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">8: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">9: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action background-secondary color-white">10: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">11: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">12: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">13: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">14: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">15: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">16: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">17: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">18: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action">19: Menu Item</a> </li> <li class="menu__item"> <a href="#" class="menu__action is-active">20: Menu Item</a> </li> </ul> </div> </div> </div> </div>  <script src="./dist/scripts.umd.js"></script> <script> document.addEventListener('scroll-stash:saved', ({ type, detail, target }) => { console.log({ type, detail, target }); }); document.addEventListener('scroll-stash:applied', ({ type, detail, target }) => { console.log({ type, detail, target }); }); document.addEventListener('scroll-stash:anchor', ({ type, detail, target }) => { console.log({ type, detail, target }); }); const options = { selectorAnchor: '.is-active', selectorTopElem: '.dialog__header', selectorBotElem: '.dialog__footer' }; const scrollStash = new ScrollStash(options); scrollStash.init(); console.log('scrollStash:', scrollStash); document.addEventListener('click', ({ target }) => { if ( target.classList.contains('js-api-anchor-show') || target.parentElement.classList.contains('js-api-anchor-show') ) { const scrollBox = target.closest('.example').querySelector('[data-scroll-stash]'); console.log(scrollStash.anchorShow(scrollBox, 'smooth')); } if ( target.classList.contains('js-api-anchor-get') || target.parentElement.classList.contains('js-api-anchor-get') ) { const scrollBox = target.closest('.example').querySelector('[data-scroll-stash]'); console.log(scrollStash.anchorGet(scrollBox)); } if ( target.classList.contains('js-api-init') || target.parentElement.classList.contains('js-api-init') ) { console.log('init...'); scrollStash.init(); } if ( target.classList.contains('js-api-destroy') || target.parentElement.classList.contains('js-api-destroy') ) { console.log('destroy...'); scrollStash.destroy(); } }); </script> </body> </html>