Stack Overflow
Stack Overflow

Questions tagged [scroll-snap-points]

33 questions
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
2 answers

React Native snapToOffsets for only one snap and then scroll normally

Using react native, a ScrollView can snap to respecified points on the y axis of the ScrollView element:
Walrus
  • 19,801
  • 35
  • 121
  • 199
3
votes
2 answers

What are the bare necessities for CSS snap scroll to work?

I've been trying to implement a super simple horizontal snap scroll (as shown here: https://css-tricks.com/practical-css-scroll-snapping ) yet I am consistently failing at that. I've probably searched through all the questions and answers here but…
selmanbey
  • 318
  • 1
  • 8
2
votes
1 answer

Center Selected Item Inside a Number Picker Widget in JavaScript

[Precondition] I am having difficulty figuring out how to make a Number Picker Widget behave similarly to the mobile picker component. If the user assigns a number by default, then the selected number should be automatically snap to the center when…
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
2
votes
1 answer

CSS only scroll snap in iOS

I am trying to achieve CSS only scroll-snap behaviour in an app but see that it doesn't work as expected in iOS. Here is link to CodePen that demo the case. The code is enclosed below body, html { height: 100%; margin: 0; } body { …
Simon
  • 158
  • 1
  • 7
2
votes
1 answer

css scroll-snap not working when rule is first removed then added again (chrome)

i have a container with scroll-snap-type: y mandatory; and child elements with scroll-snap-align: start;. In chrome the scroll snapping works as expected. i then remove the css rule regarding the scroll-snap-type via js and set it later back. after…
mbehzad
  • 3,758
  • 3
  • 22
  • 29
1
vote
1 answer

how to implement scroll snap stop:always;

I've created a horizontal scroll, but I'm trying to control how the user scrolls while they swipe on their phone screens. In that when a user swipes with a lot of force they are still taken to section B and not directly to section D. So if a…
Luis
  • 43
  • 7
1
vote
1 answer

Vertical scroll-snap implementation not working

I have a react app with some semantic-ui styling. I am trying to implement a scroll snap with sections of my site. I have tried adding scroll-snap-type: y mandatory; and scroll-snap-align: start; in the body and sections like this: body { margin:…
Dylan T
  • 139
  • 11
1
vote
0 answers

How to use scroll magic to scroll snap and be full screen?

I want to create a section similar to the “App timers” section on this page(it's towards the bottom): https://www.android.com/versions/pie-9-0/. I can only have one section like this on my page with the rest being normal scroll. I see that they…
user933061
  • 13
  • 1
  • 8
1
vote
1 answer

Any way to disable CSS scroll snap points?

I have a single-page mobile bootstrap site that when scrolling, the fixed navigation bar covers over the section titles when tapping on a link in the navigation menu. I found that this is being caused by CSS scroll snap points. I tried to set…
Daniel Harris
  • 1,805
  • 10
  • 45
  • 63
1
vote
0 answers

(Angular2) Controlling scroll event input for SmoothScrolling to anchorpoints

I've been trying to create a menu that automatically scrolls from anchor to anchor. Here a short gif that shows how the application works. But the application must react to the user scrolling and not be pressing those navigation buttons. This menu…
Alex Spelt
  • 19
  • 5
1
vote
1 answer

JS Check if Browser Supports CSS Snap Points

Is there a simple way to check if a browser supports CSS Snap Points. I've set up a fail safe for a horizontal gallery but I'd like to turn off all the Javascript if the browser already natively supports snap points. Also, are there any decent…
Walrus
  • 19,801
  • 35
  • 121
  • 199
0
votes
0 answers

@gorhom-react-native-bottom-sheet | How to logout user's current snapPoint value?

there is no problem with react-native-bottom-sheet itself, all works as intended. But I'm wondering - if I provide three snapPoints values ie ['50%', '75%', '90%'] is it possible to logout specific value being currently used on user's…
Out-A-Time
  • 1
  • 1
0
votes
0 answers

Does someone know how to implement snap scrolling in Angular?

My page consists of 3 components: "navbar", "product details" and "footer" as it shows in the picture. page structure As you can see product details component has 3 sections. Each of them except first one (100vh - 4.5rem) has height of 100vh. I want…
Cookie
  • 17
  • 3
0
votes
2 answers

No scroll snap with scroll-snap-type and -align / Simple Example not working Chrome/Firefox /

Using Chrome / Firefox, I created a container (.container) for a couple of picture (list items with class img). I added scroll-snap-type on the container. I added scroll-snap-align on the items with class img. What am I missing here? HTML
basti
  • 123
  • 1
  • 10
1
2
3