Snap scroll CSS on index page

Site URL: https://www.justinphang.com/

Hey there,

I'm trying to do snap scroll in my index page, ideally each scroll will have this height (refer attached): where there will be equal spacing on top and bottom of each scroll (except the very top and very bottom). I tried another CSS code from another fellow forum member but it gave me a syntax error.

How should I go about this?

You need to use JavaScript to do this. JS should be added to Code Injection, not Custom CSS.

Ahhh, thanks for clarifying.

@justin_phang you can do this with CSS now, it use to require JavaScript but there's a new feature in CSS that makes this easier to implement

Ahh, if there's any advice on how this can be achieved in CSS or the code, that would be much appreciated. Regardless thanks for tip.

/* Add this code to Design -> Custom CSS */


.index-section {
    scroll-snap-align: start;
}

.index-list {
    overflow-y: scroll !important;
    height:100vh;
    scroll-snap-type: y mandatory !important;
}

Result:

 

Love it! And I couldn't agree more on keeping it to just desktop site. Though I would still prefer to have some buffer space on the top and bottom part of each screen, is it possible?

The snapping effect is also producing different results on different computer of mine, should i clear the cache or something to reset it? So far MacBook Pro looks good but my Windows PC is skipping screens to snap.

Is it possible to achieve this on any page in Squarespace 7.1? I would really appreciate it!

@RyanDejaegher

1 hour ago, hme164 said:

Is it possible to achieve this on any page in Squarespace 7.1? I would really appreciate it!

The short answer is yes you should be able to achieve the effect on just about any page.

If you are interested in more background there is a good article on the CSS Scroll Snap Module on CSS-Tricks.

If you need help with a more specific use case on your site. Please give us the URL for a specific page where you want to apply the effect and tell us more about how you want your page to behave. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue.

10 minutes ago, creedon said:

The short answer is yes you should be able to achieve the effect on just about any page.

If you are interested in more background there is a good article on the CSS Scroll Snap Module on CSS-Tricks.

If you need help with a more specific use case on your site. Please give us the URL for a specific page where you want to apply the effect and tell us more about how you want your page to behave. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue.

Thank you so much! Really appreciate it!

https://penguin-primrose-f7ng.squarespace.com/university-teaching/project-one-27l2n

tmp2020

@hme164 I take it that you'd like to have the snap effect happen at the top of each project on that page?

@creedon Yes. 

On 9/26/2020 at 4:24 AM, creedon said:

The short answer is yes you should be able to achieve the effect on just about any page.

If you are interested in more background there is a good article on the CSS Scroll Snap Module on CSS-Tricks.

If you need help with a more specific use case on your site. Please give us the URL for a specific page where you want to apply the effect and tell us more about how you want your page to behave. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue.

Hey are you able to help here please? As I would like to have the snap sections on 7.1 and can't get it to work. Thanks!

@niketatripp

Please post the URL for the page where you want to apply this effect and where you want the snap to happen.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

@creedon

Amazing thanks

https://studioiris.squarespace.com/about

password: studio

@niketatripp

Add the following to Design > Custom CSS.

html, body {

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

#collection-5fbc285ad1f86032babc977e .page-section {

  scroll-snap-align: start;
  
  }

This is for a v7.1 site but the code targets elements specific to this site. If you want the code to work on your v7.1 site it needs to be changed.

Let us know how it goes.

7 hours ago, niketatripp said:

I was wondering how you make it more 'snappy' if you see this example https://studiothomas.co.uk/

It snaps faster and stronger.

That page is using fullPage which uses Javascript. Javascript allows for a wider range of behaviour than CSS.

On 12/28/2020 at 3:43 AM, creedon said:

That page is using fullPage which uses Javascript. Javascript allows for a wider range of behaviour than CSS.

@creedon do you know if you're able to implement fullpage in squarespace? I have tried to use to code you wrote earlier, but it seems to not be working properly. I am also on 7.1.

Site: lukaseriksen.com

5 hours ago, LukasEriksen said:

do you know if you're able to implement fullpage in squarespace?

I do not know if it could be used in SS.

5 hours ago, LukasEriksen said:

I have tried to use to code you wrote earlier, but it seems to not be working properly.

The code would need to be changed to work with your site. Where do you want to implement the effect on your site? On the homepage? Other pages?

@creedon Thanks for the quick reply! I would want the scroll snapping feature to only be on the home page. I found a codepen using fullpage (https://codepen.io/alvarotrigo/pen/NxyPPp) , does this mean i could potentially be able to implement it?

Thanks for the help!

3 minutes ago, LukasEriksen said:

@creedon Thanks for the quick reply! I would want the scroll snapping feature to only be on the home page. I found a codepen using fullpage (https://codepen.io/alvarotrigo/pen/NxyPPp) , does this mean i could potentially be able to implement it?

Thanks for the help!

 

@creedonI did adapt the #collection, but the scrolling was really off, it kept jumping to the bottom of the page.

3 hours ago, LukasEriksen said:

I found a codepen using fullpage (https://codepen.io/alvarotrigo/pen/NxyPPp) , does this mean i could potentially be able to implement it?

Codepen code is not specific to Squarespace. So just because it appears on CP doesn't mean it will work on SS. From my quick reading of the FP docs I wasn't hopeful that is could be easily used with SS.

On 1/6/2021 at 4:30 PM, LukasEriksen said:

I did adapt the #collection, but the scrolling was really off, it kept jumping to the bottom of the page.

I didn't see a problem with it jumping to the end of the page when trying the code on your site.

However it did not snap to where I would expect it to. But it did snap to the four or so sections in that page.

If anyone else wants to dive in here to help please feel free.

Hi,

I'm trying to do something similar to just the INDEX page of my site. I'm trying to implement scroll snapping for these project pages and only on web, not mobile. 

I've tried to implement the suggestions above, but couldn't seem to get it to work.

Here's the link to the site:

https://radish-mandarin-3n9k.squarespace.com/

Pass:  Portfolio2021

Any suggestions would be greatly appreciated.

Z

**UPDATE** Figured it out using @Creedon CSS above, I just had the wrong collection ID, so it was affecting a page, not the index. Thanks!

Hi @creedon,

I am attempting to have the very same snap-scroll effect on my site and wondered if you might have a spare minute to help?? 

This is the site: 

https://tomato-porpoise-bb3a.squarespace.com/

It would be great if all the pages acted the same way and snapped from one project to the next.

I would be super grateful! Thanks a lot

Cheers