Stack Overflow
Stack Overflow

Questions tagged [scroll-snap]

118 questions
13
votes
2 answers

Conflict when simultaneously using keyboard events for scrolling and CSS scroll snapping

You can horizontally scroll my demo page by pressing Space Bar, Page Up / Page Down and Left Arrow / Right Arrow keys. You can also snap scroll with a mouse or trackpad. But only one or the other works. Is there a way that keyboard events and CSS…
Tzar
  • 5,132
  • 4
  • 23
  • 57
9
votes
2 answers

CSS Scroll Snap get active Item

I have a problem with CSS scroll snap. I want to detect the snapped element via JavaScript and assign it, e.g., a CSS class or similar. Unfortunately, I haven't found a way to detect the snapped element yet. Background: I have a list with subitems,…
Fabio Thoma
  • 108
  • 1
  • 5
9
votes
2 answers

Determine if a snap-scroll element's snap scrolling event is complete

Abstract I am creating an image gallery using a scrollable element. I am using CSS' scroll-snap feature, which allows me to snap onto the elements (images) in the scroller. By binding to the element's scroll event, I am applying various actions when…
Klaas Leussink
  • 2,208
  • 16
  • 23
9
votes
4 answers

Website double-scrolling on Chrome using scroll-snap-type

I want my sections to take the whole page and as soon as the user scrolls up or down, the previous/next section comes up. It works perfectly on Firefox and on Chromium-Edge, but when I tested it on Chrome, it always skips a section (goes from…
Félix Poirier
  • 95
  • 1
  • 4
9
votes
1 answer

CSS scroll snap points with overflow greater than 100vh?

I am having trouble implementing scroll snap points when containers are taller than 100vh. I want to use mandatory snap points, but also allow a user to scroll when the height is greater than 100vh. I've sort of made this work by adding additional…
Athanasios Babasidis
  • 232
  • 2
  • 11
8
votes
4 answers

Scroll Snap only when scrolling down

I am struggling with scroll-snap in CSS. Is there a way to use scroll-snap only in one vertical direction? I want to make it snap on every section when scrolling down, but not to snap when scrolling back up again. Is it possible inside CSS or do I…
kailias
  • 81
  • 3
8
votes
0 answers

how control/change speed of animation with scroll-snap CSS?

How can we control the speed of animation with scroll-snap CSS API ? in this exemple : https://codepen.io/newinweb/pen/EpPgdR function toggleSnap() { var snapEnabled = document.getElementById('carousel').classList.toggle('snap'); …
Matrix
  • 3,458
  • 6
  • 40
  • 76
8
votes
4 answers

Safari browser is loosing scroll position when changing scroll-snap-type or scroll-snap-align

No matter if I change the scroll-snap-type or the scroll-snap-align, Safari looses the scroll position and starts from first scroll-snap element. This problem can be easily reproduced in the scroll example here:…
hummh
  • 131
  • 4
7
votes
2 answers

Is it possible to adjust css scroll-snap speed/easing?

I set up CSS Scroll Snap, and I would like to implement easing to it, if possible. Once it snaps to a point, it scrolls too fast. Is there any way to adjust scroll-snap speed/easing using CSS, JavaScript, or an external animation library? My project…
Ethan Partridge
  • 147
  • 3
  • 12
7
votes
0 answers

Mouse "click and drag" scrolling behaviour and CSS scroll-snap

I'm building a simple slider animation that is controlled using native CSS scroll-snap and a scroll eventListener. You can see a working example here: https://codepen.io/juliangarnier/pen/10d5ad6a2d9bf2cbac8e8d2e289153fa I'm trying to add a click…
Julian
  • 698
  • 2
  • 8
  • 17
6
votes
2 answers

CSS scroll snapping without restricting parent size

I'm trying to have a web page scroll and snap to beginning of some elements as the user scrolls through a webpage using scroll-snap-type: y mandatory and scroll-snap-align: start. My problem is that it's a large webpage and unlike many samples where…
Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389
6
votes
1 answer

ScrollTo not working with scroll-snap and 100vh container

When I have a .sections container with several .section elements inside, and setup scroll-snap, it will ONLY work if I give the section a fixed height of 100vh. Without the height, the scroll-snap will not work. This is fine, except without the…
Jeremy Harris
  • 24,318
  • 13
  • 79
  • 133
5
votes
2 answers

CSS Partial Scroll Snapping

Been playing around with the scroll snapping, looks like it saves a lot of head scratching with writing the functionality in JS. Here's a challenge, has anyone out there found a way to selectively choose which children to snap and which children…
Dan Smith
  • 71
  • 3
5
votes
2 answers

How to make scroll-snap working in FF with body as scrolling container

I am trying to have a page with vertical scrolling snapped to every paragraph (every photo description). I also want body to be my scrolling container, not some div inside body. I have: body.scroll-snap { scroll-snap-type: y…
Sergey Kirienko
  • 281
  • 3
  • 12
4
votes
1 answer

CSS "scroll-snap" jumping for infinite scroll in Chrome

When using an infinite list with scroll-snapping, the scroll position seems to jump (the screen flashes) when adding new elements at the bottom while swipe-scrolling in Chrome Mobile or with the mobile mode activated in Chrome for Windows. The…
Jonas Märtens
  • 63
  • 6
1
2 3 4 5 6 7 8