creedon Posted October 29, 2021 Share Posted October 29, 2021 @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
Jleebz Posted July 13, 2022 Share Posted July 13, 2022 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 ManonLarrieu 1 Link to comment
creedon Posted July 13, 2022 Share Posted July 13, 2022 14 hours ago, Jleebz said: What other values are there other than "start"? https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align 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
Wolfsilon Posted July 13, 2022 Share Posted July 13, 2022 Hey! Fullpage.js Commercial Developer here: Fullpage will not work with Squarespace without a complete overhaul to the directory. Link to comment
ManonLarrieu Posted August 3, 2022 Share Posted August 3, 2022 (edited) 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 August 3, 2022 by ManonLarrieu Link to comment
lilibrv Posted October 17, 2023 Share Posted October 17, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment