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.

smooth-scrolling
Filter by
Sorted by
Tagged with
1 vote
0 answers
292 views

smooth scrolling offset not working on iOS Safari

I am using this code, works well on Safari and Firefox and adapts perfectly when resizing the browser window and the mobile navigation appears. In both cases all sections scroll and align with their ...
Erikamyself's user avatar
0 votes
2 answers
54 views

jQuery code disabling links to other web pages

I have some jQuery code that allows for smoothing scrolling on my web pages. $(document).ready(function(){ // browser window scroll position (in pixels) where the button will appear var offset ...
Michael Benjamin's user avatar
0 votes
1 answer
130 views

Jquery smooth scroll - Only works properly when scroll bar is at the top when the link is clicked

New to Javascript and have spent hours on this problem :/ I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript. <script src=&...
ficklesheep's user avatar
3 votes
1 answer
1k views

Smooth-scroll bug in React useEffect hook only on Chrome / Chromium

i have a bug where a useEffect hook is stopping a scrollIntoView call from completing only on chromium browsers. i imagine there's something i'm not understanding about useEffect. any help's ...
Solomon Broadbent's user avatar
2 votes
1 answer
4k views

Locomotive Scroll - switching from horizontal to vertical and back

I am using Locomotive-Scroll (https://locomotivemtl.github.io/locomotive-scroll/) for smooth and horizontal scrolling, it's easy and works well. However, I'd like to integrate a section of vertical ...
aleksandrevic's user avatar
7 votes
1 answer
1k views

How to make GestureDetector detect two-finger drag in Flutter Web?

I'm trying to implement Smooth Scroll in a PageView, so I have set the physics property to NeverScrollableScrollPhysics() and I have wrapped the items in the builder fonction with a GestureDetector ...
Momar's user avatar
  • 179
0 votes
1 answer
2k views

Add Offset Y "-100px" when I click on an anchor and it scrolls me down to an element

I need to add an offset of -100px when I click on a link that scrolls me down to a section. I have managed to make my scroll smooth , but i cannot make it to scroll with offsetY. Here is my js code : ...
Mada's user avatar
  • 21
0 votes
0 answers
283 views

Problem with Scrolling in WinForm C# in Panel and button emulation swipe

I have a problem with scrolling in WinForm C# in Panel AutoScroll with Dynamic created buttons. On Form1.cs Created a Panel1 with Manual Designed Buttons (6 or 7) and set autoscroll= true. You can ...
Alex's user avatar
  • 1
0 votes
1 answer
471 views

Flutter ListView.separated frame drop when loading huge list

I'm trying to display a lazy list in flutter for windows. The list has approximately 2300 elements in it. The list is within a FutureBuilder, whose future is to fetch the 2300 elements from Hive ...
christo pananjickal's user avatar
0 votes
1 answer
442 views

Jquery smooth scroll with offset

I have the following code for smooth scroll on my website. Right now when I click to move to a new section it is cutting off the title of the section. I have seen other jquery examples showing offset, ...
user1522290's user avatar
0 votes
2 answers
93 views

Stop script if users scrolls

Disclaimer: I am not a JavaScript developer, I'm a web designer. HTML and CSS, I handle all day, JS, not so much. That's why I'm reaching out for help. The following script allows for a smooth scroll ...
Ricardo Zea's user avatar
  • 10.2k
0 votes
1 answer
1k views

How to smooth scroll to each component of my page without using any anchor

I want to implement smooth scrolling behaviouur on my html page, which is build of react components. Each component has a height of 100vh. I have seen many smooth scrolling tutorials and blogs which ...
shaswat kumar's user avatar
0 votes
2 answers
401 views

JavaScript/JQuery - on Click smoot scroll to ID

My intention is to implement a smooth scroll behaviour but I'm new into JS/JQuery. When I click to my navbar anchor tag the page is scrolling down to the section with the corresponding ID. To do this ...
Emanuel Rista's user avatar
1 vote
2 answers
346 views

CSS Smooth scrolling property not working

I know it's a question asked by many people but after dozens of posts I still cannot figure out the answer to this. I have a simple html page: <!DOCTYPE html> <html lang="en"> &...
Simon's user avatar
  • 23
1 vote
1 answer
4k views

locomotive.js smooth scroll update() on load

I'm using locomotive.js (https://locomotivemtl.github.io/locomotive-scroll/) on a wordpress site. It worked perfectly until I uploaded to a live server. On the live server the elements sometimes bump ...
golds1981's user avatar
0 votes
1 answer
110 views

What is the correct terminology for that frictional / momentum-based scrolling effect found on some websites?

I've been coming across a lot of websites recently that have a very satisfying friction / momentum-based scrolling effect on them. An example would be https://useplink.com/en/. I've been searching for ...
Kjartan Hrafnkelsson's user avatar
0 votes
1 answer
710 views

Button for smooth scrolling

I am doing a button for smooth scrolling to the bottom of the page. The button is working, but without the smooth animation. Does someone have an idea, what I am doing wrong? The same kind of code for ...
nörde's user avatar
  • 1
1 vote
1 answer
390 views

How can I solve the Warning: Received `true` for a non-boolean attribute `spy`, that is appearing in the console?

I have seen some similar problems some of which have been answered, but I feel props my specific case might need a different treatment. So I have the following React code: import React from "...
Klem Lloyd Mwenya's user avatar
1 vote
0 answers
2k views

When using smooth scroll why does it not scroll to the the area I have specified for it to scroll to?

I am making a website and I have chosen to use smooth scroll. The smooth scrolling effect works, but if (for example) i chose to scroll down to the 'timeline' section, and then scroll back to 'home', ...
lunAr- creator's user avatar
0 votes
2 answers
1k views

Reactjs nav smooth scrolling and routes

Can someone help me, I designed a custom navbar that when you click on a Link it would smooth scroll to that component. The problem is that when I'm on another route (sample: /shop) and I click on the ...
Nellartsa's user avatar
0 votes
1 answer
341 views

RecyclerView should stay at bottom with stackFromEnd

so basically this question already exists on the web: How do I keep my RecyclerView scrolling to the bottom with new items? Almost always you will find the answer: add stackFromEnd=true or ...
Max Gierlachowski's user avatar
1 vote
1 answer
553 views

Smooth Scroll using JS inside of a container

I'm trying to create a smooth scroll effect with js. I'll be using flex-box & grid to setup a layout and I will have sidebars and other containers with scrollable content. I am able to get the ...
Dan's user avatar
  • 63
2 votes
1 answer
34 views

Scroll function from DevEd tutorial is not working

I've watched this tutorial https://www.youtube.com/watch?v=oUSvlrDTLi4 and I was doing the same thing as here, I only replaced var to let with ES6 standard. function scroll(target, duration = 1000)...
user avatar
1 vote
1 answer
169 views

JS smooth scroll not working with append anchor

I've created this pen to show exactelly my problem but in short, I can't make a jQuery append anchor to work smoothly (with css-tricks snippet), when all HTML anchor work perfectly. As you can see, ...
dragoweb's user avatar
  • 721
4 votes
1 answer
109 views

Performant Javascript Fixed Scrolling

I have read countless posts and rewritten code countless times, and I have found myself up against a wall. I am trying to overcome the limitation of not using CSS for fixed position of an element when ...
syzmic's user avatar
  • 41
10 votes
2 answers
4k views

Horizontal Smooth Momentum Scrolling

THE PROBLEM: I need to apply some mouse wheel smooth horizontal scrolling to this layout: https://jsfiddle.net/38qLnzkh/. ALTERNATIVE: I've found this Script that does exactly what I want but it seems ...
David Martins's user avatar
0 votes
1 answer
437 views

CSS scroll-behavior saying unknown property

CSS error here Image here Does anyone know why it says this, when I have referred to many documents? I have a pop-up image that I want to appear from the bottom of the page and stops at the center. ...
K94's user avatar
  • 39
2 votes
0 answers
194 views

Smooth scroll not making it to anchor

I am currently working on a one-page website using smooth scroll. Currently, I can scroll to each individual section just fine from the top of the page, but when I am in the "team" section ...
Luke Foster's user avatar
5 votes
1 answer
575 views

Receiving high precision WM_MOUSEWHEEL events with Logitech mouse on Windows 10

To improve scrolling in my application, I recently added support for high-resolution scrolling wheel events. According to the documentation this is pretty straightforward: The handler for ...
Daniel Lehmann's user avatar
2 votes
3 answers
207 views

JQuery scrolling speed to be instantaneous please

I would like my JQuery scrolling speed to be instantaneous (not smooth/not fast but instant like a classic anchor href="#"). It seems to be about the queue but how could I change my script ...
Ben's user avatar
  • 21
2 votes
0 answers
1k views

How to make smooth scrolling pinned sections in chrome behave like firefox

I have a codepen linked that shows smooth scrolling and pins each section in firefox. However, once opened in chrome it is delayed. The website behaves perfectly in Firefox because of Firefox's smooth ...
Lennie Finch's user avatar
9 votes
2 answers
2k views

HiTouch_PressGestureDetector error, limitied touch pointer

I'm working on flutter project. I'm using singleChildScrollView and listView for scrolling. But when I want to scroll in any screen in app I face to this error: W/HiTouch_PressGestureDetector(20161):...
Reza Mojed's user avatar
0 votes
0 answers
27 views

anchor with full link smoothscrolling

hello I have a site with few pages and on one of them I wanted to use anchors and I need all of them in the top menu at all times. So I added to anchors full link https://premiumfoams.com/branze.html#...
Jerzy Sokołowski's user avatar
-1 votes
1 answer
550 views

I'm trying to get my Blazor Server app to run a smooth scroll J Query script

I want to smooth scroll to each of the a hrefs in the box class. My index.razor page is as follows... <html> <body> <div class="sidebar"> <ul class="box&...
CharlesWall's user avatar
0 votes
1 answer
84 views

Create smooth scrolling effect

I have a code to scroll content horizontally, it works but whenever it scrolls, it scrolls items one by on like breaking, so I want it to scroll smoothly, that is the sample code below, please I need ...
Greywood's user avatar
0 votes
0 answers
303 views

smooth scrolling to a div container after clicking an anchor link in the navbar (centering the div container in the middle of the viewport/screen)

Excuse the long and maybe confusing title. What I am trying to achieve is that when I click a link in my navbar-dropdownmenu the (new loading) page will automatically scroll smooth to the ...
Gisbert12843's user avatar
0 votes
1 answer
380 views

Smooth scrolling to specific section on click

I am relatively new to coding and so there could be something super obvious that I am missing... but I am trying to create a button to scrolls to a specified section on my webpage. I have used an ...
Posy Hewitt's user avatar
4 votes
5 answers
396 views

How to get the exact smooth scrolling functionality of Chrome?

When the user clicks a button on my page it creates a new element below it and then scrolls downwards towards it. I'd like this to be done smoothly, and that can be accomplished like so: window.scroll(...
Ryan Peschel's user avatar
  • 11.5k
0 votes
0 answers
287 views

how to preload posts like instagram feed

Im using recyclerview in my app but the problem with it, is it looks not so good as if we scroll the images or videos take time and the viewholder stretches. What i want to do is load the upcoming ...
Shubham Patil's user avatar
0 votes
0 answers
70 views

On target reached in Smooth scroller in android

Here is how my app looks I have a horizontal suppressed recyclerview and once the user clicks an answer it smoothscrolls to the next one , tho I wanted to prevent clicks while the smooth scrolling is ...
Ahmed Khalil's user avatar
1 vote
3 answers
6k views

locomotive.js smooth scroll wrong viewport height

I use locomotive.js (https://locomotivemtl.github.io/locomotive-scroll/) on a wordpress site and I ran into an annoying mistake: when navigate to a dynamically loaded page (i.e. portfolio archive page)...
Nadam's user avatar
  • 39
1 vote
2 answers
166 views

How to smooth the movement of a list item at a specific position

I have listView. When item is in certain position he changes color. (see picture).On the top(with blue squares) - it is what I have now. Down - what I need. But when scrolling, when the item is in the ...
Julia's user avatar
  • 369
1 vote
1 answer
45 views

My sideways scroolling website doesn't work with smooth scroll

Hi I included jquerys smooth scrolling to my website and it doesn't work, i turned my site around that you can scroll to the right. I already tried smooth-behaviour and this does work. Javascript: $(...
nwms's user avatar
  • 13
0 votes
0 answers
142 views

jquery prepend to div without scrolling to top in mobile

While scrolling a div from the bottom to the top on mobile devices, I am trying to add fluid pagination. To do this I am using $('#container').prepend(html) which adds the next page, however after ...
user969622's user avatar
1 vote
3 answers
825 views

I am looking for ExpandableListView Auto Scroll to particular position

I want my app to auto-scroll at particularGroup in ExpandableList when a user selects a particular group name from RecyclerView. I am using the Interface to handle the click from RecyclerView here is ...
Athos Tokbi's user avatar
0 votes
2 answers
499 views

CollectionView choppy scrolling when loading admanager banner ads

I have a collection view with n sections and m rows. The number of sections and rows are fetched from an API. Typically 18 sections with 10 rows each. Each cell item is just one UIImageView and two ...
Raj D's user avatar
  • 255
7 votes
4 answers
8k views

Flutter Web "smooth scrolling" on WheelEvent within a PageView

With the code below import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget ...
Francesco Iapicca's user avatar
1 vote
1 answer
569 views

How to load image in imageview only when on screen in RecyclerView

I am trying to make an app that contains unlimited images from storage or web.But problem is recyclerview stucks or scroll very slowly.How i can make a list of images in my app like gallery, whats app,...
Coder's user avatar
  • 11
0 votes
1 answer
182 views

Jquery: Smooth Scrolling script not working

Somehow I can't figure out how to make this Smooth Scrolling Jquery script work for me. The first console.log does returns "Test", the second one returns nothing after I click on a link. I'm ...
TitoMikani's user avatar
-1 votes
1 answer
2k views

scroll-based image sequences animation more smooth

I want a Scroll-Based Animation with image sequences like this: https://www.wayoutintl.com/ when visit above link ,see section-3 when we scroll down, beach image move from day to night. This animation ...
Rajat Pandya's user avatar

1 2
3
4 5
20