giadabianc Posted October 18, 2022 Posted October 18, 2022 Hello, URL: https://zoom-deformazione.squarespace.com/ password: edoardo I would need to insert scroll effect for all the pages of my site. How can i do it? Thank you very much,
joseph81 Posted October 18, 2022 Posted October 18, 2022 You mean, scroll a screen down on clicking on a button? Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated.
giadabianc Posted October 18, 2022 Author Posted October 18, 2022 Hi Joseph, thank you for your helpfulness. I would like to have each block displayed with a scroll. I will give you an example: https://willmedia.it/loop/metaverso/. Is it possible? I have a business plan!
joseph81 Posted October 18, 2022 Posted October 18, 2022 Hi. Can you add back your website? I can't access it! Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated.
giadabianc Posted October 19, 2022 Author Posted October 19, 2022 Hi Joseph, I'm Sorry! https://zoom-salvagnini.squarespace.com/
joseph81 Posted October 19, 2022 Posted October 19, 2022 (edited) Updated: Custom CSS panel: .no-scroll { position: fixed; overflow-y:scroll; width: 100% } #sections { height: 100vh; overflow: hidden; scroll-behavior: smooth; } #sections .page-section.section-height--large:not(.content-collection):not(.gallery-section):not(.user-items-list-section) { min-height: 0; height: 100vh; } Injections > Footer (scripts) <script> const wHeight = window.innerHeight; const element = document.getElementById('sections'); let isScrolling = false; let scrollingTimeout; element.addEventListener('wheel', ev => { ev.preventDefault; ev.stopPropagation(); if(isScrolling) { return; } if(event.deltaY < 0) { element.scrollBy(0, -wHeight); } else { element.scrollBy(0, wHeight); } }); element.addEventListener('scroll', ev => { isScrolling = true; document.body.classList.add('no-scroll'); clearTimeout(scrollingTimeout); scrollingTimeout = setTimeout(() => { isScrolling = false; document.body.classList.remove('no-scroll'); }, 150); }) </script> Edited October 19, 2022 by joseph81 Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated.
joseph81 Posted October 20, 2022 Posted October 20, 2022 In case you would like this code explained, I wrote an article about it here: https://www.ui-workarounds.com/scroll-snapping-neighbouring-sections/ Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment