How to trigger an on scroll event without scrolling

user_1872517 0
Viewed 68753

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.

linkedin google-chrome-devtools lazy-loading jquery javascript
10 Answers

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

user_16441310

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

user_35349520

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.

user_35094490

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

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

});

user_177434950

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

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