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.

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

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.

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.

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.)

Answer 5

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);

Answer 6

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.

Answer 7

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);

Answer 8

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}`); });

Answer 9

您可以在元素上触发滚动/滚轮事件，如下所示：

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

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;

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