Closed guimaggiorini closed 3 months ago
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Locomotive Scroll</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <!-- Bootstrap --> <!-- Locomotive Scroll --> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.min.js"></script> <script> (function () { const locomotiveScroll = new LocomotiveScroll(); })(); </script> <!-- Locomotive Scroll --> </head> <body> <main style="height: 150vh;"> <div> <h1>Hello 👋</h1> </div> <div> <h2 data-scroll data-scroll-speed="0.5">What's up?</h2> <p data-scroll data-scroll-speed="0.8">😬</p> </div> </main> </body> </html>
add this property into your CSS:
html { scroll-behavior: auto !important; }
When I include Bootstrap via CDN, scrolling suddently gets much slower and snappier, but when I remove it, everything goes back to normal
HTML code to reproduce
Desktop