search

rigor789 / vue-scrollto

Adds a directive that listens for click events and scrolls to elements.
https://vue-scrollto.rigor789.com/
MIT License
2.07k stars 99 forks source link

bootstrap 5 conflict #749

Closed guijsbr closed 1 year ago

guijsbr commented 1 year ago

I'm having a conflict in Vue 2.7 that the scroll starts very slow for the exact 'duration' that I set, then it scrolls smootly to the element without any easing. So if I set a duration of 1000, it scrolls slowly for 1s with very little movement and then goes smoothly to the element.

I found out that the problem goes away if I disable Bootstrap 5 CSS (any version of 5). Bootstrap JS or BootstrapVue does not have any effect on this. If I add only "import 'bootstrap/dist/css/bootstrap.css'" in my main.js or call Bootstrap trough index.html, I get the same problem.

Any idea how to solve this?

rigor789 commented 1 year ago

I'm not sure what bootstrap does, likely something related to scroll-behavior, poke around the bootstrap css in your devtools, see if there's anything setting that?

guijsbr commented 1 year ago

Hi rigor, you're right, I found about this solution a few days ago. I had to set scroll-behavior to auto to override bootstrap settings.

html { scroll-behavior: auto !important; }

Thanks for the fast reply. I only saw it today.