You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi this is super helpful, but I've hit an issue with applying active styles. I tried to set up a repl.it to reproduce this issue, but this package isn't supported on Linux.
I have an <a> tag with a link to an id. When I click it, it appears to properly scroll to the link, but doesn't apply the active style.
I am on Windows 64 bit, Chrome version 80.0.3987.149.
After a little debugging, I figured out this was happening because window.scrollTo is not actually scrolling to the exact coordinates given as parameters (I'm not sure why that happens though). The element has a pageYOffset of 727. I'm not sure what the most appropriate fix is for this, I was able to resolve this issue locally by doing:
let animateScroll = () => {
currentTime += increment;
let val = this.easeInOutQuad(currentTime, start, change, duration);
window.scrollTo(0, val);
if(currentTime < duration) {
setTimeout(animateScroll, increment);
}
//------------- My Proposed Change ---------------
else if (window.pageYOffset < to) {
// console.log('Last scroll iteration, somehow did not finish scroll. Currently at position', window.pageYOffset)
// for the element at a height of 727, it always was 726.7999877929688
// note I got 0.4 from experimentation (I don't know if this is a reasonable value)
window.scrollTo(0, window.pageYOffset + 0.4);
}
//------------- End Proposed Change --------------
};
An alternative solution would be to change the condition at line 48 of ScrollSpyNav.js to check for proximity within some epsilon of the element's location.
Let me know what you think and then I can go ahead and PR a fix.
The text was updated successfully, but these errors were encountered:
@charliefisher Hi there, there is a component prop offset you can pass to adjust the start of the section you are scrolling to. That would be a better solution than hardcoding a 0.4 value in here. See where the offset parameter is used
If you have trouble seeing the active style being applied to the <a> link, make sure you pass the component prop activeNavClass, and implement proper css styling for that class.
Hi this is super helpful, but I've hit an issue with applying active styles. I tried to set up a repl.it to reproduce this issue, but this package isn't supported on Linux.
I have an
<a>
tag with a link to anid
. When I click it, it appears to properly scroll to the link, but doesn't apply the active style.I am on Windows 64 bit, Chrome version 80.0.3987.149.
After a little debugging, I figured out this was happening because
window.scrollTo
is not actually scrolling to the exact coordinates given as parameters (I'm not sure why that happens though). The element has apageYOffset
of 727. I'm not sure what the most appropriate fix is for this, I was able to resolve this issue locally by doing:An alternative solution would be to change the condition at line 48 of
ScrollSpyNav.js
to check for proximity within some epsilon of the element's location.Let me know what you think and then I can go ahead and PR a fix.
The text was updated successfully, but these errors were encountered: