Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
justin_phang

Snap scroll CSS on index page

Question

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

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

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.


Learning something new everyday

Share this post


Link to post
  • 0
/* 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

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

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

 

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...