Jump to content

Snap scroll CSS on index page

Recommended Posts

@singlegraphics

It is basically the same code from my December 22, 2020 post.

html, body {

  -ms-scroll-snap-type : y mandatory;
  scroll-snap-type : y mandatory;
  
  }

.homepage #page .page-section {

  scroll-snap-align : start;
  
  }

This is for v7.1 on the home page.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 8 months later...

Hey! 

Bringing this back from the dead. What other values are there other than "start"? I've tried this code and it does work, just need to work on positioning. I'd like the scroll-snap to "start" at the top of the page, then snap down to right below the "arrow" on the homepage.

URL: joshlebowitz.com

Link to comment
  • 3 weeks later...

Hey @creedon

Also digging into this old topic 😂 I am going crazy at the moment. I am testing out the snap function on this horizontal layout and it's not working ...

https://polygon-chipmunk-y896.squarespace.com/home?noredirect

pw: creativegrind

I would like my scroll to snap at the end of the second section. I have tried the html code vertically and it worked. I fixed the y into x for my horizontal scroll and it didn't snap.

thus I am following an another tutorial

 


.horizontal-snap {

  overflow-x: hidden;
  overflow-y: auto; /*scroll*/
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory !important;
}

.horizontal-snap > h1 {
  scroll-snap-align: end !important;
}

still not working. I wanted to try the scroll snap alignment on horizontal website, but I also wanted to find a solution for my website which is horizontal & vertical scrolling. As you can see my second section is vertical scrolling ... and the section start to scroll down if I am scrolling and my mouse is already on the section. I want to make sure user reach the END of the section, so that the horizontal scrolling stop and the vertical scrolling start.

What do you think ?

Cheers !

Edited by ManonLarrieu
Link to comment
  • 1 year later...

Hi @creedon - I have used your CSS to get the snap effect on my page.

html, body {
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  }

#collection-65273a4ef0812c09b9979793
.page-section {
  scroll-snap-align: start;
  }

However there is this bug that I cannot figure out, where the page gets stuck and you cannot scroll back down. Do you know of any fix for this?

Thank you so much in advance!

The site & page: https://www.lilibravi.com/lili/

Link to comment

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.