Jump to content

Snap scroll CSS on index page

Recommended Posts

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?

 

Screen Shot 2020-06-21 at 12.10.42 PM.png

Learning something new everyday

Link to comment
/* 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:

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment

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.

Learning something new everyday

Link to comment
  • 3 months later...
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.

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
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

Link to comment
  • 2 months later...
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!

Link to comment

@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.

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

@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.

Edited by creedon

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
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.

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
  • 2 weeks later...
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?

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
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.

Link to comment
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.

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
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.

Edited by creedon

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
  • 1 month later...

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!

Edited by Madge
Solved
Link to comment
  • 5 months later...

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.