Questions tagged [scroll-snap]
118 questions
0
votes
0 answers
How to pause playing video when user scrolls to new video using the CSS scroll-snap feature and JS
I have 2 videos that work like Instagram reels, when a user clicks the first video it starts playing, but if they scroll to the next video and click to start it the previous video keeps playing. What I would like is only the video in the current…
Ryan D
- 741
- 1
- 11
- 29
0
votes
1 answer
How can I use scroll snap with container wrapped?
How can I use scroll-snap property on the next code?:
.wrapper {
width: 100px;
height: 100px;
overflow: scroll;
}
.wrapper > div {
width: 300px;
height: 100px;
display: flex;
}
.item {
width: 100px;
height: 100px;
box-sizing:…
AlignItems
- 59
- 11
0
votes
1 answer
Scroll-snap not working - is it because the header above the elements doesn't allow it to snap to "start"?
I'm building a website for a personal project, and want the sections in the main body of the page (below the header) to snap to start when scrolling vertically. I have included the necessary code in the parent and child divs respectively, yet I see…
qwaliy
- 1
- 2
0
votes
1 answer
Center a CSS slider when using scroll-snap and flex
I am trying to create a basic slider with 3 slides. The idea is to show the second slide on initial view, if the user swipes left, the slider will show the first slide, if the user swipes right it will show the right slide.
I have the initial slider…
Dan
- 1,565
- 3
- 23
- 43
0
votes
0 answers
ScrollBy and scrollTo conflicting with browser scrolling
I have created a simple carousel based on a native browser scrolling behaviour with the use of scroll-behavior: smooth; and scroll-snap technique. Works perfectly and is progressively enhanced. I trigger the carousel with js with scrollBy and…
Rych
- 103
- 7
0
votes
0 answers
Valid CSS alternative to scroll-snap-points
Since the CSS properties scroll-snap-points-x and scroll-snap-points-y are deprecated, I was wondering if there still is a non-js solution for scroll snapping to fixed points.
I have the following document:
body, main, header, article, section {
…
AbgrundLemur
- 35
- 6
0
votes
1 answer
Infinite scroll conflicts with scroll-snap-align CSS property
To allow infinite scrolling inside a
, I added a 'scroll' event to it. When the first child is in the viewport, I prepend the last child and viceversa.
Ive gotten this to work perfectly until I bring in scroll-snap-align. Here, I have set up an…
Omar F. Kuri
- 11
- 1
- 4
0
votes
1 answer
Stop user from scrolling more than 1 element at once
The problem
Basically I have a mobile website that has some videos. Each video takes 100% width and 100% height. I'm trying to make a scroll snap type feed, where the user can scroll only 1 video at a time and if they reach a certain point on the…
user
- 1,022
- 2
- 8
- 30
0
votes
1 answer
react-use-scroll-snap package in next.js gives error: SyntaxError: Cannot use import statement outside a module
I would like to use a scroll snap package in my next.js project but I receive the following error:
What should I add and where to make it work?
Related code:
export const Navbar = () => {
const scrollRef = useRef(null);
…
evll
- 97
- 3
- 12
0
votes
1 answer
Chrome based browsers - ScrollTo and anchor links not working
I am trying to build a portfolio site where an elevator moves up and when it gets to a floor the doors open and the detail renders. When scrolling further the doors close and when it reaches a certain point it snaps and smooth scrolls to the…
Geoff Walker
- 1
- 3
0
votes
0 answers
scroll-snap with react 17
I am trying to use scroll-snap in react v17 with styled-components, but I cant get it to work. I found codesandbox project what works in react v16.8 and it is written in class components. I am trying to write it in function component.
Here is my…
Myrat
- 347
- 2
- 4
- 16
0
votes
1 answer
CSS 'scroll-snap' troubleshooting
I'm trying to do simple scroll-snap css on my horizontal scrolling webpage, but it's not working. Any ideas on what to do? My webpage is jakobnatorp.com. It seems like scroll-snap-type and scroll-snap-align are not valid commands, they are marked…
Jakob Natorp
- 49
- 1
- 1
- 10
0
votes
1 answer
how to convert class component to function component?
I am new to React and I am trying to convert this code below to a function component, but it doesn't work, I have never used class components. Could anyone help me to convert it?
Thanks in advance.
import React from 'react'
import ReactDOM from…
Myrat
- 347
- 2
- 4
- 16
0
votes
1 answer
scroll snapping Issue
I'm creating a landing page where top section have normal scrolling, followed by a container with scroll snapping enabled followed by a normal scrolling container. But when I have scroll snapping enabled, I cannot move out of the middle container. I…
Arsene Wenger
- 587
- 4
- 21
0
votes
1 answer
How to Scroll page from point to point
The question is simple. I have a single page website and it has six equal (height and width) sections. I have anchor tags placed in top of these sections so that user can jump directly to the specific section using the menu.
I want the page to…
Karan Vij
- 1
- 1