Locomotive JS is not working with rest of JS
I Want to Make My Website Smoother on Scroll for that I have been using Locomotive JS to achieve a smoother scrolling effect on my website. However, I have encountered some issues with the rest of my JavaScript code not being applied correctly. For example, I created a navigation bar that is supposed to move up by -100% when scrolling down, and return to its original position when scrolling up. Unfortunately, this functionality, along with some other features, is not working as expected when using Locomotive JS. This is the link of code pen where the code is uploaded https://codepen.io/artbymali/pen/gOyBREG.
12 Replies
Don't use smooth scrolling. If the user wants smooth scrolling they can enable it in their browser
Actually, I want smooth scrolling because it adds a sense of luxury to the website.
it adds a sense of annoyance
don't use it
Yes, you are right with your perspective, but I want to experience of smoothness.
can you help me?
I'm unfamiliar with the library, and agree with Zach. If you do want to use smooth scrolling, I'd try to see if the built-in CSS version is good enough for your luxury version: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
MDN Web Docs
scroll-behavior - CSS: Cascading Style Sheets | MDN
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
O thanks, I have used this property. It is good, but I am trying to learn new things, so it is okay. Also, have you ever used smooth scrolling with the library?
Like I said, I'm unfamiliar and dislike smooth scrolling, so no.
ok ok
I wonder if you guys are talking about 2 different types of smooth scrolling. When clicking a navigation link that takes you to an anchor further down the page, smooth scrolling gives you a sense of where you are on the page. A sudden 'jump' to the anchor could be confusing.
The type of smooth scrolling that changes the default (mouse) scrolling behaviour when the user scrolls, that is indeed very annoying.
Let me clarify that I am saying that while scrolling on the page, not clicking on an anchor.
can anyone suggest me a the smooth scroll library?
https://gsap.com/docs/v3/Plugins/ScrollSmoother/
Uses the browser's native scroll; no "fake" scrollbars.Works well with gsap.scrollTrigger too 😉 I semi agree with what was said above but I like fun things too, just make sure you put it behind a prefers-reduced-motion because parallax/smooth scrolling is one the worst offenders for motion sensitive users. I even put scroll-behavior behind it.
Thanks