Questions tagged [scroll-snap]
118 questions
4
votes
3 answers
Snap scroll CSS too fast/jumpy in Chrome but works fine everywhere else
Very new to this but I have a page of sections that I have a scroll snap function, but when viewed on chrome the transition isn't smooth at all, it jumps from one section to the other far too quickly.
Is there any way to solve…
Matthew Wilson
- 51
- 1
- 2
4
votes
1 answer
Scroll Snap for div that looks like an iPhone in HTML
I made this iPhone in HTML (Please do not pay attention to the spaghetti code, and it's in german, if it is necessary i can translate it with pleasure):
var time = document.getElementById("time");
var notification =…
user16262715
4
votes
1 answer
Potential CSS scroll snap bug in Chrome
Please check this CodePen. The problem is described there. There is also a demo. I've tested it on Mac and Windows.
There is the same behavior in Chrome (on Mac and Windows).
Meanwhile, other browsers (even Safari and Opera which are on WebKit too)…
Denis
- 2,429
- 5
- 33
- 61
4
votes
0 answers
Mobile Chrome flickering when using scroll snap
I am experiencing a weird glitch on Chrome for mobile: I have a webpage using scroll snap and if I scroll down the whole chrome browser would flicker, including the address bar! I don't know why. It works perfectly on other browsers so it's not a…
Rubis
- 101
- 5
4
votes
3 answers
Scroll snap CSS skipping elements
Long story short, on Chrome (81.0.4044.138) scroll snapping skips the middle
for some reason. On Firefox (76.0.1) it works fine. Any idea why?
html {
scroll-snap-type: y mandatory;
}
body {
…
Sam
- 375
- 1
- 5
- 15
3
votes
1 answer
How to set scrollLeft in JS while scroll snapping is enabled?
This jsFiddle shows the issue.
I am trying to allow horizontal scroll snapping using scroll-snap-type so that when the user scrolls, the scroll snaps to the nearest div.
I also want to scroll the div when the user presses a button. However, this…
auto
- 1,062
- 2
- 17
- 41
3
votes
1 answer
Why is the scroll-snap not working in CSS?
I have no idea why the scroll-snap-type CSS property isn't working as expected.
I just want the page to scroll down to each div smoothly and it doesn't want to work.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
…
Lychas
- 173
- 2
- 11
3
votes
1 answer
CSS scroll snap choppy/laggy on Chrome desktop
I've been building this page using scroll-snap and it's working well on Firefox desktop & mobile, as well as Chrome mobile.
But on Chrome desktop (Edge desktop as well) I get very choppy/laggy scroll animation, to the point I don't consider it…
Field Of Copper
- 350
- 2
- 8
3
votes
0 answers
CSS Scroll Snap Bug in Chrome on Android
I'm trying to implement full-size browser viewport scrolling using a CSS scroll-snap. But there is a problem with Chrome on Android (tested in 91 version): when the address bar shifts (at first scroll or on scroll direction change) scroll element…
Oleksandr
- 31
- 2
3
votes
1 answer
CSS scroll snap with mouse does not work in Safari but works in Firefox and Chrome
Here's a simple scroll snap demo:
.scroll {
border: 2px solid black;
width: 150px;
height: 150px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
display: flex;
}
.item {
scroll-snap-align: start;
flex: 0 0 auto;
width:…
Decade Moon
- 32,968
- 8
- 81
- 101
3
votes
0 answers
CSS Scroll Snap Behaviour like Firefox
I've encountered a problem on every browser other than firefox on macos and android (havent tested windows and ios) where the scroll snapping is delayed. On Firefox it works beautifully, but on Edge, Chrome and Safari it's delayed. Is there any fix…
LMG
- 91
- 1
- 6
3
votes
0 answers
How to make scroll-snap to auto-scroll on a horizontal container in CSS?
I made a slider with CSS using scroll-snap property. However I would like to have my slider auto-scroll every couple seconds but user should also be able to slide back and forth. So far, user can scroll back and forth but when I add an animation…
zimmerbimmer
- 908
- 7
- 24
2
votes
0 answers
CSS's scroll snap messes with logo color change over section
I've used midnight.js for changing logo color over section. It's working the way its intended to. But when I implement css scroll snap the color changing is lagging. It looks like 1 second.
Demo:
With scroll snap:…
Sebastian
- 21
- 3
2
votes
1 answer
How to enable Scroll Snap with Mouse Wheel Event Listener
When enabling CSS scroll snap, it stops a Javascript wheel event listener from working correctly.
I have created a horizontal website that uses a wheel event listener to scroll on the X axis when scrolling with a mouse wheel.
As demonstrated…
Matthew98
- 53
- 7
2
votes
1 answer
Cannot change horizontal scroll snap into vertical scroll snap
I've found this codepen, but It was Horizontal. When I was trying to make it vertical, it did not work.
Pen I found the code on:
// None!
/* Hide the scroll bars */
body {
overflow-y: hidden;
}
.slides {
/* We set the scroll snapping */
…
Green
- 486
- 2
- 11
- 31