How to trigger an on scroll event without scrolling

Question

my Question is, how can i trigger (simulate or something esle) an on scroll event. In my special case I don't want to load all the Conservations in LinkedIn by scolling down all conservations, because there are too many!

I do not need a PHP or Javascript solution. Simply using dev-tools at chrome is enough to get my goal.

Eckmann

Answer 1

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

Kirima

Strangely, this didn't work for me in Chrome using react-lazyload, where using window.scrollTo did. – Tuckerbag

Worked perfectly - window.dispatchEvent(new CustomEvent('scroll')) – Parvenu

Answer 2

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.

Kindred

Answer 3

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.

Bally

If you have a window scroll listener, like the one defined in this answer, then you can trigger it with this code: var e = document.createEvent('Event'); e.initEvent("scroll", true, true); window.dispatchEvent(e); – Shuffle

Answer 4

window.scrollTo(window.scrollX, window.scrollY); is not working for me in Firefox. Nothing happens, and it seems to be because no scrolling actually needs to be performed to go to the place where you allready are.

BUT window.scrollTo(window.scrollX, window.scrollY-1); is working. By this command the window.scroll event function is fired.

(Trying to cheat by for instance: window.scrollTo(window.scrollX, window.scrollY-0) is not working either.)

Tolbooth

Write this as a comment not answer. – Excreta

Answer 5

You can fire a scroll/wheel event on a an element like so:

el.dispatchEvent(new CustomEvent('wheel', { detail: { deltaY: 1 } }))

Carbonic

Answer 6

As everybody replied, window.scrollTo(window.scrollX, window.scrollY); is work truly but in some cases, you should add a number to the windows current scroll position, for example in my case I added 1 to my scrollY and then called scrollTo method like this:

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

Bodgie

Answer 7

Sometimes you need find the scrollElement. In my case, my scrollElement is body and running on mobile, so below code works fine:

document.body.scrollTo(window.scrollX, window.scrollY + 1);

Hope it will be helpful.

Furriery

Answer 8

For my use-case I needed to change 'scrollX' to 'pageXOffset' and 'scrollY' to 'pageYOffset' to get a non-scrolling-scroll working in IE 11 (Internet Explorer):

    window.scrollTo(window.pageXOffset, window.pageYOffset - 1);
    window.scrollTo(window.pageXOffset, window.pageYOffset + 1);

Geotectonic

Answer 9

So if you want to catch the moment the client is scrolling up or down, then for best practice you should use the 'wheel' event listner.

window.addEventListener("wheel", event => {
    /* code here */
});

Now for capturing the actual moment the user is scrolling. use the 'deltaY' or 'wheelDeltaY' property's of the 'event' object to check its value and do something at a value below or above 0 like this.

window.addEventListener("wheel", ev => {

    const direction_1 = ev.deltaY;

    if (direction_1 < 0) console.log('scrolling up');
    if (direction_1 > 0) console.log('scrolling down');
    

    const direction_2 = ev.wheelDeltaY;

    if (direction_2 > 0) console.log('scrolling up');
    if (direction_2 < 0) console.log('scrolling down');

});

when scrolling up or down direction_1 or direction_2 always returns not an exact but nagative or positive value.

window.addEventListener("wheel", ev => {

  const direction_1 = ev.deltaY;
  if (direction_1 < 0) console.log(`deltaY      |  scroll up  | ${direction_1}`);
  if (direction_1 > 0) console.log(`deltaY      | scroll down | ${direction_1}`);
      
  const direction_2 = ev.wheelDeltaY;
  if (direction_2 > 0) console.log(`wheelDeltaY |  scroll up  | ${direction_2}`);
  if (direction_2 < 0) console.log(`wheelDeltaY | scroll down | ${direction_2}`);

});

Halfslip

Answer 10

Utility function scrolling by 1 px every animation frame

const startFakeScrolling = (container: HTMLDivElement) => {
  const cb = () => {
    container.dispatchEvent(
      new CustomEvent("wheel", { detail: { deltaY: 1 } })
    );
    window.requestAnimationFrame(cb);
  };
  window.requestAnimationFrame(cb);
};

The deltaY will not exist in the fake scroll event, but it will be inside detail. Add this to any handlers

const delta = e.deltaY != null ? e.deltaY : (e.detail as any).deltaY;

Plication

Answer 11

A litle bit off topic:

You dont need to use the dev tools just create a bookmark with the folowing "url"

    javascript:(function(){
        /*  Put your code here, e.g. the scrollng event  or add an 
           event listener to the current page or some other code*/
    })();

when you click this bookmark, the cod will be executed, inside the current page's environment

Eruption

Cool idea, but i am not so familiar with Javascript. If you have a real solution it would be nice. – Eckmann