How to trigger an on scroll event without scrolling

Alternatively, you can manually trigger a real scroll event as following:

el.dispatchEvent(new CustomEvent('scroll'))

Which feels a bit less of a hack (and more performant) than dual scrolling by +1 and -1 pixels...

This should run any piece of code listening for a scroll event.

Edit: To support IE11 or other legacy browser, consider using a CustomEvent polyfill such as mdn-polyfills

This doesn't work on Chrome or Firefox

window.scrollTo(window.scrollX, window.scrollY);

This works on both:

window.scrollTo(window.scrollX, window.scrollY - 1);window.scrollTo(window.scrollX, window.scrollY + 1);

Not fancy, but works.

Note that only the first line of code is necessary, the other one is just to return the scroll back to where it was. I had to trigger a scroll function on a button. If you happen to tap the button twice, the effect of the scroll is visible and it's not very fancy. That's why I prefer adding the 2nd line of code as well.

You absolutely need a Javascript solution. What else is going to do the event listening/triggering, do you think?

If you want to fire a scroll event, just literally scroll to where you already are by typing window.scrollTo(window.scrollX, window.scrollY); in your scripts or dev tools console. Alternatively, you can fake one using a combination of CustomEvent and the dispatchEvent function.

If you want to trigger something on a scroll event, listen for scrolls using window.addEventListener("scroll", function(evt) { ... }); and make the handling function do whatever it is you need to do.