Comments (16)
I too have encountered that myself, and have never been able to isolate a cause. Based on another bug that cropped up, I may have a fix for it, though. Is there a demo site somewhere that I can use to debug this?
In the interim, using the easeOut*
easing types seemed to solve the issue, if memory serves correctly.
from smooth-scroll.
Great, thanks for the fast reply. That helped.
Sorry I dont have a demosite right now.
from smooth-scroll.
You shouldn't need to use such a lame fix though. It should work with all easing types. Thanks for the bug report!
from smooth-scroll.
Hey, any chance you could email me a zip of your site in progress? I'm having a touch time duplicating the problem, and having a working example would help me come up with a more proper fix.
http://gomakethings.com/about/
from smooth-scroll.
I can confirm the issue. The problem is related to the use of the document.body.scrollHeight property for identifying the document's body height, at least in Firefox browsers. Chrome and Safari just work fine here.
I am using a fixed header. This is what happens:
The scroll animation starts and is stopped immediately by the function _stopAnimateScroll
after the first calculated animation step, because the last if-condition evaluates to true: (window.innerHeight + currentLocation) >= document.body.scrollHeight
. In Chrome and Safari, it is always ok, but in Firefox (window.innerHeight + currentLocation)
is greater than document.body.scrollHeight
with a difference of my fixed header's height (minus one). So, subtracting the fixed header height (headerHeight
) is a workaround for me, although it will have disadvantages for others: (window.innerHeight + currentLocation - headerHeight) >= document.body.scrollHeight
.
The issue can be fixed by using the following cross-browser solution of identifying the document height: http://james.padolsey.com/javascript/get-document-height-cross-browser/
I hope this helps. By the way, thank you for your great work so far! I discovered smooth scroll three days ago and I am using it on my website http://www.jonas-havers.de (german) which just launched yesterday.
from smooth-scroll.
Jonas - Thanks for sharing that link! I'll take a look and make updates as neccessary. Cheers!
from smooth-scroll.
Also, it hadn't occurred to me that if the link is at the very bottom of the page, that condition would stop the animation. That gives me another angle to explore. Thanks again!
from smooth-scroll.
And just noticed your pull request. Will test tomorrow. Thanks!
from smooth-scroll.
fixed
from smooth-scroll.
Hi there. Is this fix merged into the latest version? I see this was merged into the master branch but have the same issue though I just downloaded it today. In the interim, the "easeOut" option is solving the problem, but curious why this fix isn't working for me. I don't have a live site up yet to demo this.
from smooth-scroll.
When you have a chance to get a demo set up, please do share the link. This should be solved in the current version, but there could be some weird bug or edge case I haven't come across yet.
from smooth-scroll.
Thank you! This solved it for me.
I've changed easing: 'easeInOutCubic' to easing: 'easeOut'.
from smooth-scroll.
@dennisperremans Sorry you had to update your easing method. I'm wondering if there's a weird rounding issue happening or something..
from smooth-scroll.
Thanks @cferdinandi and @JonasHavers for the details. I thought I was losing my mind. The easeOut*
fix worked for me, too. Thanks again!
from smooth-scroll.
@cferdinandi check deleting the line selected in the img. I can fix the problem of stoping scroll at the bottom.
from smooth-scroll.
@bastardesigns That line is needed to prevent an infinite loop from happening if the scroll target is outside of the window.
from smooth-scroll.
Related Issues (20)
- not working on Firefox 70.0.1 / Ubuntu HOT 4
- Manual update: Scrolling to an anchor link on another page HOT 6
- Does not support special characters (Γ€,ΓΆ,Γ₯, etc.) HOT 1
- [Question] Draggable scrolling? HOT 3
- Offsetting for fixed header when coming from another page. HOT 2
- Polyfill for scroll-behavior? HOT 2
- Uncaught ReferenceError: SmoothScroll is not defined when compiling/minifying code into main scripts.min.js file HOT 2
- v16.1.1: Not published on npm! HOT 1
- Forgot console.log in last commit HOT 1
- Setting up auto offset HOT 9
- Scroll without #id_name on url HOT 1
- Focus is not adjusted when reduceMotion is enabled HOT 3
- Edge case issue - Failed to execute 'pushState' on 'History when linking to a from that has an input with name 'id' HOT 1
- overflow-y: scroll in css breaks smooth-scroll HOT 3
- Disable focus on options HOT 1
- Back button with header issue HOT 1
- Missing documentation step on how to import project via npm HOT 2
- Easing pattern documentation in source code is wrong
- Focus is not shifting properly when reduceMotion is enabled
- The event object is passed into the popHandler() function but not used
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from smooth-scroll.