Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New smooth scroll option in ScrollSpy not working #36372

Closed
3 tasks done
SamuelMiller opened this issue May 16, 2022 · 2 comments · Fixed by #36528
Closed
3 tasks done

New smooth scroll option in ScrollSpy not working #36372

SamuelMiller opened this issue May 16, 2022 · 2 comments · Fixed by #36528
Labels

Comments

@SamuelMiller
Copy link

SamuelMiller commented May 16, 2022

Prerequisites

Describe the issue

Using the latest js and css beta 5.2 Bootstrap, I am unable to get the new smooth scroll option in Scrollspy to work on the website I am starting to develop, using <div data-bs-spy="scroll" data-bs-target=".navbar" data-bs-smooth-scroll="true"> Clicking on scroll-to links in the top menu jumps to the anchor sections rather than smoothly scroll as it did before. There is no difference. I thought there might be a conflict with CSS scroll snap. But disabling that class in the CSS does not change anything.

Reduced test cases

I've duplicated the issue on Codepen, including custom Javascript:
https://codepen.io/sam-miller-the-flexboxer/pen/BaYpvPL

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge

What version of Bootstrap are you using?

beta 5.2v

@SamuelMiller SamuelMiller changed the title Provide a general summary of the issue [Bug] New smooth scroll option in ScrollSpy not working May 16, 2022
@GeoSot
Copy link
Member

GeoSot commented May 17, 2022

Maybe smoothScroll is misleading, as its main purpose is to stop doc scrolling.
Although, here is the place you could experiment on

const height = observableSection.offsetTop - this._element.offsetTop
if (root.scrollTo) {
root.scrollTo({ top: height })
return
}
// Chrome 60 doesn't support `scrollTo`
root.scrollTop = height
}
})
}

changing to something like root.scrollTo({ top: height, behavior: 'smooth' }) and open a PR 😃

@SamuelMiller
Copy link
Author

SamuelMiller commented May 18, 2022

The documentation (https://getbootstrap.com/docs/5.2/components/scrollspy/) is not clear. It states that smooth scroll "enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables." The term "smooth scrolling" usually refers to the animated smooth scrolling effect when clicking on a link to a different part of the page. For an example, see https://codepen.io/prvnbist/pen/GQMPZq click on a top right menu item and see how the page slowly scrolls (animates scrolling) to the new section. If that's not the effect that enabling "smooth scroll" does in ScrollSpy bootstrap 5.2 then I suggest the term be changed.

@GeoSot GeoSot changed the title [Bug] New smooth scroll option in ScrollSpy not working New smooth scroll option in ScrollSpy not working Jun 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants