Questions tagged [scroll-snap]
118 questions
2
votes
0 answers
scroll-snap skips section on smaller screen - Chrome
I am trying to implement scroll-snap on a page. I have added scroll-snap-type to the container element and scroll-snap-align to child sections. It works fine on Chrome on large screen, and on firefox on all screen sizes. However, it seems to skip…
javapyscript
- 720
- 8
- 22
2
votes
0 answers
CSS scroll-snap-align. Can´t scale a scroll element keeping its position
I'm trying to implement a "zoomable" gallery. I want the width of one of the items to grow when the user hovers it but keeping its position fixed on the window.
I´ve been using CSS scroll-snap properties and it seems to behave nicely in Chrome and…
Hugo Vale Pereira
- 71
- 1
2
votes
0 answers
Scroll Snap animation not working on safari & mozilla
I am trying to implement a Carousel with only CSS (scroll-snap-align methods).
This is my code : https://codepen.io/kushul/pen/NWRjZLq?editors=1100
Parts of the code:
@keyframes snap {
96% {
scroll-snap-align: center;
}
97% {
…
kushul soomaree
- 21
- 6
2
votes
1 answer
CSS Scrolling - snap into place?
I'm trying to implement vertical snap-into-place scrolling using CSS for a site, but having trouble getting it to work. To isolate the problem, I created this toy example:
#container {
scroll-snap-type: y mandatory;
}
.tile {
height: 100vh;
…
Toby
- 685
- 2
- 9
- 15
2
votes
0 answers
scrollsnap is jumping a div when you scroll with mouse
I've set a scrollsnap for different sections on a webpages.
It's working fine on big screens (1200px and + width) or with the touchpad. However on smaller screens (1200px and - width), when you use the scroll wheel on the mouse it 'jumps' from…
Mathi
- 141
- 2
- 17
2
votes
0 answers
CSS scroll snapping acting strange since Chrome 81 update
I've been working on a single page website with screen filling "slides", and really want to use scroll snapping if possible. I got it running perfectly a few das ago, but now the entire thing is broken since Chrome updated: when using the scroll…
Luke
- 181
- 5
2
votes
2 answers
Horizontal scroll snapping sections within a vertical scroll snapping section, have empty space above because of ul's and div's
So I have vertical scroll snapping sections that are all 100vh and 100vw. I was going for the appearance of separate pages. One of those sections has a horizontal scrolling section with the same idea of 100vh and 100vw sections. Well, everything…
Pavel Kudlanov
- 21
- 6
2
votes
1 answer
How to set the default position of a scrollable DIV?
I'm using scroll-snap-type to move through DIVs and put them into view. What I want to do is set the view to the 2nd DIV by default, so when the page loads the div with "This should be viewed by default" is seen, and then the user is able to scroll…
ditto
- 5,917
- 10
- 51
- 88
1
vote
1 answer
Scroll snap on mobile Safari holds position when dom changes
I have a problem that occurs only on Safari mobile. On Chrome mobile it works as expected.
I'm writing a single page application.
It's built of several containers. Only one is visible at a time. They are shown and hidden using jQuery show and hide…
Rico
- 362
- 1
- 4
- 18
1
vote
1 answer
React scroll-snap flicker when using useState
I am experiencing a very weird flickering (glitch) when using the combination of
css scroll-snap
useState
Sub-Components
But ONLY in the combination of these three!
Here is the minimal reproducable code:
carousel.js
import styles from…
somecoder
- 53
- 6
1
vote
2 answers
Disable CSS scroll snap after certain point
OK so I have 7 sections, first 4 sections are CMYK, and last 3 sections are RGB.
I am trying to stop scroll snapping on sections RGB.
If I apply scroll-snap-align: start; to CMYK sections, when I scroll to end of section .bg-key (black) it always…
joshmoto
- 4,472
- 1
- 26
- 45
1
vote
1 answer
Next.js and snapscroll not scrolling to top of page on route change
Snapscroll and height:100vh together seemed to be causing a problem where changing pages would not be showing the 1st element, instead were either influenced from the pages previous position, or the position of the previous page.
As i am using…
Eoin Payne
- 101
- 6
1
vote
0 answers
Scroll snapping with Vanilla Javascript
I am currently trying to do scroll snapping with vanilla javascript. I want to snap the scroll at specific pixels, I am aware of the various libraries and CSS scroll snap, but they all depend on all the elements being the children of specific tags.…
Advaith
- 2,490
- 3
- 21
- 36
1
vote
0 answers
How to scroll from one div to another with duration (for ex. 500ms) on button click in horizontally scrollable container that has scroll snap property
I want my container to scroll 320(child width) + 20(gap) = 340px when I click the button in 500ms duration like animating (not delay).
.Container {
display: flex;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
position: relative;
…
cryndry
- 39
- 7
1
vote
0 answers
CSS Scroll Snap - Children with Transform on Hover Causes Janky Effect in Chromium Browsers
When scrolling through content in a scroll container with the scroll-snap-align property applied to the children, I was able to create this jarring/janky effect with children elements that have a transform property applied on hover.
Running example…
kdmaz
- 21
- 1
- 1