Questions tagged [scroll-snap]
118 questions
0
votes
0 answers
Fullscreen CSS scroll-snap container within a larger page
I am trying to create a vertical slider-type thing using CSS scroll snapping. The issue I'm having is on the last "slide." I'm getting different behaviors across browsers and devices. With desktop, when you scroll back up I'm worried about the user…
learyjk
- 599
- 1
- 5
- 14
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
1 answer
Chrome scroll snap glitches
I'm building a site for a client and man I'm having a hard time with CSS Scroll Snap in Chrome...
{{redacted URL}}
I'm using Chrome 109.0.5414.87 on OSX. After the intro animation (FYI I hate these but clients love them) you should see:
Scrolling…
Drew Baker
- 14,154
- 15
- 58
- 97
0
votes
1 answer
How to stop scrollIntoView() from scrolling container to top of page?
I'm trying to build a simple, "mostly-css" image carousel that uses scroll-snap, but also has navigation buttons to control which slide is currently in view. The only solution I've found is to use scrollIntoView() on the target element, which does…
K3J
- 23
- 5
0
votes
1 answer
When using scroll snap, how can I set the default position to something other than the first column or row?
I have a three column layout that I want to be swipe-able in a mobile browser. I'm using scroll-snap to define three possible columns/positions for a horizontal scroll. This seems to be working fine.
However, I'd like to set the middle column to…
Kevin K
- 2,191
- 2
- 28
- 41
0
votes
1 answer
Scroll-Snap-Align: Bug in Chrome & Edge: Gap emerges on page top & bottom
I'm trying to create a page with sections which snap always to fullscreen. I use the CSS approach of scroll-snap-align.
The bug: When scrolling upwards on top of the page, or downwards on the bottom of the page, a gap emerges. This gap get's bigger…
aaRitsch
- 63
- 1
- 5
0
votes
1 answer
Intersection Observer + CSS Scroll Snap (fade fix div based on scroll position on underlying content)
I'm trying to recreate the Tesla.com scroll snap / fade effect. I have a to confess to being a total JS newb and have no idea what I'm doing with it.
So far, I managed to have the scroll snap work and fade in/out text on a fixed div. The problem is…
Mark E
- 1
- 2
0
votes
0 answers
Scroll snap skips elements in Chrome using mouse wheel
Trying to implement vertical scroll snap in a React component. While using mouse wheel on Chrome, it skips from 1st to 3rd element, 3rd to 5th, and so on. I am only looking to implement behavior in an individual component and not entire body or…
Perry Anderson
- 33
- 4
0
votes
1 answer
CSS scroll snapping only when full screen viewport is scrolled to
I've successfully implemented the CSS scroll snap. However, I only applied it to some sections in the middle of my page. When you start scrolling from the top and a bit of the snapping sections already show, when you continue scrolling, the snapping…
rmb08
- 1
- 1
0
votes
0 answers
Trouble creating a side scrolling sticky nav that highlights the active section on scroll with javascript
I'm learning Javascript and am trying to combine two codes into one to recreate the mobile food menu from grubhub. (example page: https://www.grubhub.com/restaurant/dunkin-807-ny-82-hopewell-junction/3278731)
The goal is to have my menu navigation…
evilmonkey522
- 1
- 1
0
votes
0 answers
cannot get css vertical scroll snapping to work
I have tried like 5 different tutorials at this point but none of them have gotten scroll snapping to work in my project. I left some things I have tried in comments and included my most recent attempt
html{
padding: 0;
margin: 0;
…
tyler
- 21
- 3
0
votes
2 answers
CSS Scroll Snap: Dynamic content insertion triggers scroll
Let's imagine an example of some content that dynamically inserted upon data fetch from server. The purpose is to display it like a bunch of items in a scroll-snapped container.
The problem is browser somehow randomly tries to scroll to some element…
LosYear
- 423
- 2
- 6
- 14
0
votes
0 answers
How to fix speed difference mouse wheel and trackpad(Mac) in snapscroll
I used snapscroll, layout and everything is perfect.
But when i scroll down there is big speed difference with mouse wheel and track pad. It move to next element too fast when mouse wheel.
It looks smooth with track pad, but not with mouse wheel(Too…
김민성
- 1
- 1
0
votes
0 answers
how to change snap scroll speed?
I've already tried {scroll-behavior: smooth;} but this one is not enough. This speed is OK with Trackpad from Mac, but not with mouse. too fast.
So i'd like to speed it down more. Is there any way to slow it down?
김민성
- 1
- 1
0
votes
0 answers
Scroll Snapping Navigation issue (It works fine with scroll, but not by
I've been working on a clone project, one of the projects from frontend practice (here is the link https://www.frontendpractice.com/projects/backstage-talks)
I'm trying to make Backstage Talks magazine archive site using React.
If you take a look at…
