Questions tagged [scroll-snap]
118 questions
1
vote
1 answer
Scroll Snap Full Screen Always Scrolls 2 Sections
The problem is shown here:
https://codepen.io/team/css-tricks/pen/yLLqqgP
This is the important part:
html {
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: start;
}
When setting…
Simon S.
- 563
- 4
- 21
1
vote
0 answers
CSS scroll-snap with Chrome
I use CSS scroll-snap in my Angular application to scroll from section 1 to 2 etc. It works perfectly fine in Firefox but not in Chrome. In Chrome it is jumping too far and always skipping one section (when using the mouse for scrolling, using the…
SonnyBl
- 61
- 2
- 6
1
vote
1 answer
getting two column sticky working with css scroll snap
I am trying to get sticky positioning to work with scroll snap but I am having difficulties.
I looked at the example on CSS Tricks (in codepen link) on how to use scroll snap and found it breaks if you don't have
overflow-y: scroll;
on the…
shellwe
- 105
- 4
- 16
1
vote
1 answer
Potential CSS Scroll Snap bug in Chrome (Windows). Two examples, only one work. Why?
I found two CSS scroll-snaps examples from csstricks.com. However, one of them does not work on Chrome on Windows.
Example #0 - works
Example #3 - does not work
What is the difference between the two examples? Why does one of them work, and not…
JonT
- 55
- 9
0
votes
0 answers
How can I make a snap scroller in a web page's inner section use the parent scroller when it reaches its start or end position?
I have implemented a snap scroller within a page's inner section. The issue I'm facing is that when it reaches the starting or ending point, it stops. I want it to use the parent scroller whenever it reaches its start or end position.
I attempted to…
0
votes
0 answers
How to deal with scroll-snap bug(?) in Firefox?
Demonstration
JSFiddle
YouTube demonstration of bug(?)
JSFiddle Code
HTML
Why doesn't this work right in Firefox?
…
1
2
Nick O.
- 165
- 1
- 7
0
votes
0 answers
scroll snap long content
I have the container set to scroll-snap-type: Mandatory, And It always snaps either to the top of the element or the top of the one below, making the middle part of the tall element impossible to scroll.
How can I fix this problem?
I tried to set…
Onder Akbulut
- 50
- 7
0
votes
1 answer
CSS snap scroll problem with scrollIntoView
CSS snap scroll works well, but when I use it on iOS, I cannot alternate between "scrollIntoView" and allowing the user to scroll with snap. If the user has already scrolled, scrollIntoView will not be able to change the scroll in iOS. Any…
calebmiranda
- 156
- 13
0
votes
0 answers
Scroll Snap Disrupting Scroll Event
Even though I have been staring at the JS logic for hours and cannot see anything at all wrong with it, the issue, if not caused by the CSS scroll snapping, must be in the JS.
Intended Behaviour: As the list with the grey background at the bottom of…
oldboy
- 5,729
- 6
- 38
- 86
0
votes
1 answer
Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null. In Flutter scroll_snap_list
Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null
I think, reason of this error isn't in my code, because I delete it and left only
import 'package:scroll_snap_list/scroll_snap_list.dart';
It's…
Andrew
- 3
- 1
0
votes
0 answers
mobile browser header and footer do not minimise automatically on scroll, how to fix that?
this is the code of index.js of a next app
have used snap-scroll due to which i think the browser header and footer parts (i.e. searchbar) do not hide or minimise automatically, how to fix that
export default function Home() {
return (
Pratham Rohatgi
- 33
- 6
0
votes
0 answers
Open a card example from framer motion homepage
I'm facing a tough issue with a grid container that uses scroll snapping. The layout malfunctions when I expand an element using layoutId. This only happens when scroll snapping is active. (I am using Framer motion for animation)
I've spent the last…
haveman
- 311
- 1
- 3
- 13
0
votes
0 answers
Css scroll-snap not working properly on every device/browser
I am building a website with a scroll-snap feature : sharpchicken.com. It worked well on MacBook/safari. With chrome the speed of scroll between snap is extremely slow. On iOS/safari it scroll a bit too fast (not sure). On some other combo like…
Hugo Fredzer
- 3
- 2
0
votes
0 answers
How to refresh AOS animations on a scroll-snap enabled main element with sections having scroll-snap-align?
I am using AOS (Animate On Scroll) library to animate elements on my webpage as I scroll through them. However, I am facing an issue when using AOS on a main element that has scroll-snap enabled, and each section inside the main element has…
Kamran Khan
- 1
- 2
0
votes
0 answers
Why is my scroll snap not working? (total noob)
I don't really know what else to type here so here is some information about the project: I have to create a web-portfolio about myself at school and i was planning to do a one-pager with scroll snapping, but somehow it doesn't work and im really…
