Stack Overflow
Stack Overflow

Questions tagged [scroll-snap-points]

33 questions
45
votes
2 answers

Css scroll-snap bug iOS 10

I noticed a strange bug in iOS 10 with the CSS scroll-snap properties. Here's my css: #springBoard{ height: 100%; width: 100%; font-size: 0px; white-space: nowrap; overflow: scroll; -webkit-overflow-scrolling: touch; …
Etienne Martin
  • 10,018
  • 3
  • 35
  • 47
17
votes
2 answers

CSS Scroll Snap visual glitches on iOS when programmatically setting `style` on children

https://codepen.io/thomaslindstr_m/pen/qJLbwa Pretty bare bones example above. I want to fade out the child I scrolled away from, but when CSS Scroll Snap is enabled, it starts glitching really bad on my iPhone iOS 12.0.1. See video here:…
thomaslindstr_m
  • 170
  • 1
  • 6
15
votes
2 answers

CSS scroll snapping stucks when you try to zoom in

CSS-scroll-snap is working very well. But when you scroll on mobile with one finger, than hold this finger still on the screen and scroll with another finger in the opposite direction (like a zoom ↕), then the scroll-snap will stuck. (regardless on…
Silvan
  • 390
  • 7
  • 24
13
votes
1 answer

Single scroll-snap-point with bottom of viewport before the last section of the page

I have a question concerning snapping-points in CSS (resource, browser-support). I want to scroll completely normal throughout the body until a latter "hidden" section. When the user scrolls to the bottom of the second last section the viewport…
Dennis Zoma
  • 2,621
  • 2
  • 17
  • 27
10
votes
5 answers

CSS Scroll snap point not working in iOS 9.1 safari

I just updated my ipad mini to iOS 9.1 and according to Can I use I should be able to use css snappoints on my device in safari. There are snap-point demo's on the web, but I've written one of my own (why not :) DEMO. In that demo you can scroll…
Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
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
9
votes
1 answer

How long is the delay for CSS scroll snap?

After you scrolled in a container which has some sort of CSS scroll-snapping active, how long is the delay since user-scrolling ended that the browser starts scrolling to the snapping position? Motivation I wrote an answer to question CSS Scroll…
yunzen
  • 32,854
  • 11
  • 73
  • 106
9
votes
1 answer

Is it possible to apply CSS Scroll Snap to the HTML tag rather than the Body tag

CSS Scroll Snap allows the browser to snap scroll to elements in a container. To apply the same logic to the vertical page scroll I found that it had to be applied to rather than (see below). This is not a major problem however it does…
Walrus
  • 19,801
  • 35
  • 121
  • 199
9
votes
2 answers

UIScrollView snap-to-position while scrolling

I am trying to implement a scroll view that snaps to points while scrolling. All the posts here I've seen about snapping to a point 'after' the user has ended dragging the scroll. I want to make it snap during dragging. So far I have this to stop…
Gizmodo
  • 3,151
  • 7
  • 45
  • 92
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
3 answers

css scroll snap isn't working on divs in React app

I tested it on different up-to-date browsers, therefore it can't be compatibility problem. I'm using create-react-app with styled components, here's my code: import React, { Component } from 'react'; import styled, { createGlobalStyle } from…
b4l4g3
  • 61
  • 2
  • 3
5
votes
4 answers

CSS scroll-snaps overflows body when reaching top

I'm having a pretty weird issue. Perhaps a bug in the scroll-snaps behaviour? When I reach the top of the page and I keep scrolling up, then the body overflows and stays there if I do not scroll down again. Even when I reload the page. Taking place…
Alvaro
  • 40,778
  • 30
  • 164
  • 336
5
votes
1 answer

@font-face stops scroll-snap-points from working?

I understand it's still very new and experimental, but have been playing around with css scroll-snap, and couldn't get it to work for a while. I eventually realised that whilst I am using @font-face in my css, scroll snap doesn't work. If I change…
Ben Galvin
  • 51
  • 3
4
votes
1 answer

Alternative to CSS scroll-snap?

I have tested CSS scroll-snap on Chrome version 75.0.3770.100 and Firefox version 67.0.3 It works beautifully in Chrome, but I am getting strange results in Firefox. According to MDN, Firefox only started supporting the new spec for scroll-snap from…
mrseanbaines
  • 823
  • 2
  • 12
  • 25
4
votes
0 answers

Stack scrolling with scroll-snap and position sticky

I'm using scroll-snap in combination to position: sticky which seemed like an elegant approach to enable a stacking card effect while scrolling. It works pretty great on desktop but on Safari (iOS12.1) I'm experiencing glitches where sometime the…
Theo.T
  • 8,905
  • 3
  • 24
  • 38
1
2 3