Jump to content

How insert scroll effect

Recommended Posts

  • Replies 6
  • Views 355
  • Created
  • Last Reply

Top Posters In This Topic

Posted (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 by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.