Questions tagged [smooth-scrolling]
Smooth Scrolling is a technique which reduces the sudden jumps in display while scrolling. The content will appear to seamlessly flow in and out of the screen as you scroll. Many browsers ship with it, but it can also be implemented by websites.
942
questions
0
votes
1
answer
40
views
Pure CSS Smooth Scrolling to Same-Page Anchor Hyperlinks Without Javascript
On this hospital website there is a nice transition animation effect when clicking on a letter link, the jump to the selected anchor text has an easy smooth animation effect that brings the visitor ...
0
votes
1
answer
26
views
smooth-scrollbar.js - Disable scroll when fullscreen menu open, activate when menu closed
As per the title, I am using smooth-scrollbar.js along with this fullscreen menu. Currently when you click the button to open the menu, you can still scroll the page, im trying to disable scrolling ...
0
votes
0
answers
30
views
How can I slow down smooth scrolling speed in React while using scrollIntoView
What I need is to slow down the speed of the default smooth scrolling speed in element.scrollIntoView(). I have found some solutions that scroll pixel by pixel using scrollTo, but the problem is that ...
1
vote
0
answers
27
views
jquery scrollTop with 'slow' animation jumps before start when html's scroll-behaviour is smooth
When I use slow or 1000 as a duration a jump occurs before the scrolling and then the scroll happens. How can I fix this? I want to control the duration when html scroll-behaviour is smooth.
$('....
0
votes
0
answers
65
views
Smooth scroll (locomotive scroll) and scroll triggered animation (framer motion + react-intersection-observer) bug
How can we make smooth scroll from locomotive scroll and scroll triggered animations (with framer motion and react-intersection-observer) coexist ?
I've made a very basic codesandbox with smooth ...
0
votes
1
answer
34
views
Scroll animation behaves erratically going up and down, possible input lag on mousewheel
I'm trying to trigger a smooth scroll to an element at the end of the page and another one to the top of the page everytime I move the mousewheel respectively down or up. The two parts have both ...
1
vote
1
answer
168
views
Javascript Auto-scroll Appears Jittery on Safari IOS
The Objective
I am trying to make an auto-scrolling feature for an online ebook reader website. The user must be able to press a button and have the page scroll automatically.
The problem
Every ...
0
votes
0
answers
18
views
How can i use ngx-videoscrolling with smooth-scrollbar js
HTML
<div class="scroller">
<ngx-video-scrolling [videoSource]="'../assets/images/video/face.mp4'">
</ngx-video-scrolling>
</div>
Smooth scroll ...
0
votes
1
answer
289
views
smooth scrolling on Safari 15.4 breaks scrolling entirely
I have a div with style overflow:hidden and white-space:nowrap. Then a button that scrolls the div left via scrollLeft += 50. Works fine until I add scroll-behavior:smooth to the CSS of the div. Then ...
0
votes
1
answer
71
views
Smooth / Momentum Scroll on window without a container
I'm trying to simulate the buttery scroll on mac os / ios, often referred to as "inertia scroll" or "momentum scrolling", as you're going through the page.
Everything I found so ...
0
votes
1
answer
280
views
How to add smooth srcolling and scroll feature in react without react-scroll package
I want to add smooth scrolling feature in my react website. I have a header component that holds the navigation bar which has three links concerned Home, Service, About. The Service and the About is ...
2
votes
1
answer
139
views
Accurately detect if a browser supports smooth scrolling?
Now that Safari 15.4 now supports native smooth scrolling, I am looking for a reliable way to check if a browser uses native smooth scrolling.
I have tried this method:
if (getComputedStyle(document....
0
votes
0
answers
34
views
jQuery: Make smooth scroll function work after loading page/navigating to the page
I've got the code below in our boilerplate that seems to work fine in the current setup. It scrolls to the section on the page when you click the navigation menu link or a link in a slick slider. What ...
0
votes
1
answer
58
views
scrolling not working inside childview - swift(iOS)
I have added child view inside the containerview, containerview height will update as subview height changed.when Bzcardview display,it will hide containerview and when containerview display it will ...
0
votes
0
answers
120
views
stop/pause smooth-scrollbar scrolling event
I guys, I use vue/smooth-scrollbar, need to stop scrolling event when top of div is reached, because I don't want the user to skip this section when scrolling. it is necessary that the scrolling stop ...
0
votes
0
answers
16
views
Scroll Behavior vs JS & Jquery Scroll
So I have the scroll-behavior attributes in my CSS, but I am aware it is not on all browsers yet. I also have the standard jQuery and JS scroll script written out. The question is would I be able to ...
0
votes
0
answers
250
views
smooth scroll not working on safari browser when using nextjs?
what am trying to achieve is the scroll behaviour: smooth but on safari, when clicking a link in the menu, all browsers will smoothly go the the section that the link refer to except for safari it ...
0
votes
2
answers
129
views
What is wrong with my attempt to make React Smooth-Scrolling work?
Im trying to use this package to implement smooth scroll within a Navbar:
https://www.npmjs.com/package/react-scroll
Here's my navbar component:
Navbar.js
import React from "react";
import { ...
1
vote
0
answers
109
views
scroll-snap doesn't scroll smoothly
I have like a grabbing effect where when we hold an element it scrolls normally but on mouseup it gives scroll-snap to the container and children so that it stops at the start of the element, but when ...
0
votes
0
answers
544
views
Locomotive scroll sticky header
I found this codepen example using locomotive scroll and implementing sticky header.
Once I click and drag the smooth scrollbar, the sticky header stops working . What could be the reason ?
let ...
0
votes
0
answers
52
views
window on load function for smooth scroll except an element
I read many answers why css fixed background (for a kind of parallax effect) does not work but I did not find anything for my problem. Then I discovered that my smooth scroll plugin blocks it. My ...
1
vote
2
answers
167
views
How to get Smooth-Scrollbar offset values?
Since I have use smooth-scrollbar in my react.js project, it gives an amazing smoothy results in scrolling but the issue I'm facing smooth-scrollbar restricted my all previous Scroll Events.
I noticed ...
0
votes
1
answer
63
views
why smooth scroll JS is not working in my web
I need help, I ve been fighting with this whole day, but cant really find a problem why this is not working.
https://jsfiddle.net/bk51xgrq/13/
$(function () {
$('a[href*="#"]').click(...
0
votes
0
answers
23
views
Passing Data Down to a Child Component
I'm making a smooth scroll menu. The menu is a component and therefore in a seperate jsx file.
It looks like below:
const SideTabs = (props) => {
const [value, setValue] = React.useState(0);
...
1
vote
2
answers
74
views
Smoothly scroll element from current position
I have written the following code to scroll an element 20 more pixels to the right.
const button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('...
1
vote
0
answers
77
views
React Smooth Skew Scrolling ref height Issue
I am trying to add a smooth scroll or aka 'lag scroll' to my React app. Everything seems to be working perfectly as the scroll is now slowed down. The issue that I am having is that the '...
0
votes
1
answer
257
views
Smooth scroll polyfill not working inside a forEach loop
I'm using the smooth scroll polyfill npm package https://github.com/iamdustan/smoothscroll on a website I'm developing and despite trying for hours, I can't get it working. After importing and ...
1
vote
1
answer
80
views
Sticky Bootstrap Navbar and Smooth-Scroll - Padding / Margin-Top
I'm trying to implement a bootstrap sticky navbar (fixed height of 81px) with smooth-scroll behavior.
The HTML site features section tags, such as <section class="section" id="news&...
0
votes
0
answers
108
views
Why isn't smooth snap scrolling working with my nav links?
Smooth snap scrolling works in every regard except when the nav links are used. Btw enabling smooth scrolling in Chrome didn't help and it's not working in other browsers anyway so there's something I'...
1
vote
1
answer
48
views
Scroll Behavior Broken
So earlier I wrote a small snippet of code to implement a smooth scroll on my webpage. Initially it was working fine, but as developing progressed it randomly stopped working and has not started ...
0
votes
1
answer
153
views
Smooth horizontal wheel only scrolling
It is very annoing to hold shift when wheeling for horizontal scrolling.
There are some ways to horizontally scrool with wheel only but they directly copy wheel deltaY into scrollLeft which results in ...
0
votes
0
answers
33
views
How to smoothly slide three div in a row
I want to slide three div in a row! The effect must be smooth. There will have two button for slide with id (#left & #right. When I click the #left button div must slide to left and the same for #...
0
votes
1
answer
262
views
react-scroll Link renders as text and is not clickable - smooth scroll does not work
I am following tutorials online for how to use react-scroll but I cant seem to get it working for me
I am using the Link tag from react-scroll and setting the 'to' attribute to the id of the div I ...
0
votes
0
answers
107
views
How to highlight the selected item in navigation bar?
I have used smooth-scroll.polyfills plugin for smooth scroll. but I have two navigation one is main navigation another one sticky navigation. I wanted highlight the selected item in navigation it ...
1
vote
1
answer
372
views
Xamarin collectionview is not scrolling smoothly
I am using collection view in Xamarin and I don't know what reason the scrolling is not smooth. I implemented compiled binding and increased the Garbage collector size in android. I would like any ...
0
votes
1
answer
204
views
Recyclerview smoothScrollToPosition is not working in android
I am using Recycler view inside NestedScrollView my code is here
<androidx.core.widget.NestedScrollView
android:id="@+id/rvSV"
android:layout_width="match_parent"...
1
vote
3
answers
7k
views
Smooth scroll in next js
How can I set the scroll effect to smooth (globally) in Next.js?
I tried to do it on the global css, but it deactivates the scroll-to-top that Next js already has.
I tried this solution that i found ...
0
votes
1
answer
82
views
Vaadin keyboard scrolling
I have set up keylisteners in Vaadin to use the arrow keys for specific tasks.
Because of this I can't use the arrow keys for scrolling the page, so I set up keylisteners to ctrl+arrow to do this ...
0
votes
1
answer
1k
views
Smooth scrolling polypill not working in NextJS
I'm using https://github.com/iamdustan/smoothscroll package to enable smooth scrolling in Safari.
I followed the doc and NextJS doc and created a custom app, in which I imported the polyfill import:
...
-1
votes
1
answer
71
views
Smooth Scrolling with only vanilla JavaScript
I have always used this jQuery script for smooth scrolling:
var root = $('html, body');
$('a[href^="#"]').click(function() {
root.animate({
scrollTop: $($.attr(this, 'href')).offset()....
1
vote
1
answer
83
views
Scroll Snap Breaks Smooth Scrolling
I am trying to make a page with scroll snap as well as smooth scrolling when you click on a link but scroll snap seems to break smooth scrolling. On iOS it breaks the links completely and on desktop ...
2
votes
1
answer
651
views
nuxt with locomotive-scroll and gsap issue on route change
I have been straggling to achieve a smooth scrolling effect on my Nuxtjs project using the locomotive scroll and gsap scrollTrigger and Scrollproxy. But having some wired issues on my halfway which I ...
0
votes
1
answer
64
views
SmoothScrollToPosition not working some time in Android
In my android application sometimes smooth scroll works but most of the time not working.
Below is my code please check and advice me.
Xml Code in this Link.
https://drive.google.com/file/d/...
0
votes
0
answers
154
views
Updating the position of element in DOM over scroll is delayed when smooth scrolling is enabled
I am trying to add a SVG element next to the form labels with absolute position. When there is a scroll I am listening to scroll event and updating the position of the SVG.
When smooth scrolling is ...
1
vote
0
answers
141
views
How to target a not Found Element with react-scroll library?
import { scroller } from "react-scroll";
I have a component DataView which conditionally renders in another component RenderData which renders the data as cards. There are 3 sections in ...
1
vote
1
answer
26
views
using smooth-scroll plugin on a button
I'm using the Smooth-Scroll plugin from the following git - link.
It works great in places like navbar where I used it as follows:
<nav class="navbar">
<ul>
<li>...
0
votes
1
answer
428
views
element.scrollTo smooth scrolling not working in Safari in snappable scrollable container
I'm creating a thumbnails slider and wanted to use snap scrolling and scrollTo. When I select a thumbnail, I want an other scrollable container to scroll to the image with an id linked to by this ...
1
vote
1
answer
145
views
How do I make Horizontal Recyclerview scroll infinitely without scrolling back to the first item
I have a Recyclerview that autos-crolls when the activity is started. The items in the recyclerview are 4 but when the scroll reaches the last(4th) item, it has to scroll back to the first item to ...
0
votes
0
answers
187
views
How can I achieve lazy column smooth scrolling in Jetpack Compose?
How can I make lazy column smooth scrolling? I created a simple page with lazy column. Problem is while scrolling it slightly glitches. Is there any solution to make smooth scrolling?
0
votes
0
answers
711
views
GSAP ScrollTrigger Reveal Fixed Header Not Working with Locomotive Scroll
I am currently on a project which use Locomotive Scroll for smooth-scrolling. All I wanted to do is to make my main navigation header menu fixed on load, then it hides when scroll down and reveal when ...