locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
https://locomotivemtl.github.io/locomotive-scroll
MIT License
7.99k stars 1.12k forks source link

Mobile speed scroll #325

Open nirsh5 opened 3 years ago

nirsh5 commented 3 years ago

Hi everyone - I'm using locomotive scroll and it's amazing :) when it comes to mobile screens it's a little bit slow and weird - I think it's weird because mobile scroll is smooth by default and it prevents it, But I want to keep using locomotive scroll in mobile because of the inview detection. So I try to speed the scroll up but can't figure out how.

I tried to add touchMultiplier but it didn't change anything:

const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".locomotive-scroll"),
  smooth: true,
  multiplier: 1.0,
  smartphone: {
      smooth: true,
     touchMultiplier: 2
  },
  tablet: {
      smooth: true
  },
});  

Does anyone have an idea how to make mobile scroll more natural with loco scroll? thanks! :)

Iraklikandelaki commented 3 years ago

You can't really do much about this, smooth: true on mobile has other issues too I won't bother discussing here. It's the best practice to completely get rid of smooth on mobile and write custom code for in-view detection. You would either use the Intersection Observer API or calculate the distance between an element and the top margin of the viewport. You'll do the latter using window.pageYOffset and getBoundingClientRect (Pretty outdated way indeed).

0xSandwich commented 3 years ago

You can't really do much about this, smooth: true on mobile has other issues too I won't bother discussing here. It's the best practice to completely get rid of smooth on mobile and write custom code for in-view detection. You would either use the Intersection Observer API or calculate the distance between an element and the top margin of the viewport. You'll do the latter using window.pageYOffset and getBoundingClientRect (Pretty outdated way indeed).

Hi, do you have a snippet for doing this ? Users of my website are complaining about the scroll on mobile devices so I try to improve it. On the example page of locomotive : https://locomotivemtl.github.io/locomotive-scroll/ , Scroll is perfect on mobile, but I don't find how to replicate that