If you're working w/ a large-scale web app that uses lots of scrolling elements like grids or infinite scroll galleries , chances are performance can get sluggish over time. Here's an easy tweak:
Use the following CSS trick for smoother and faster scrolls:
/'' Add this to your global styles ''/body {overflow-scrolling: touch;}This simple line of code ensures that mobile devices use hardware acceleration when scrolling, making a huge difference in performance.
However ⚠️
spoiler alert - it might not be the best for desktop users as some browsers handle `overflow` differently. For those cases:
/'' Desktop-specific styles ''/@media (pointer: fine) {body::before {content:";position:absolute;top:left; /'' set these to your actual viewport size or use calc() functions here ''/width;height:}}This creates a pseudo-element that forces the browser into using composited scrolling, which is faster.
Try both and see what works best for you.