How to trigger an on scroll event without scrolling

问题

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.

回答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

回答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.

回答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.

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

回答5:

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.

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

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

回答8:

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

来源：https://stackoverflow.com/questions/35879452/how-to-trigger-an-on-scroll-event-without-scrolling

标签

javascript

jquery

google-chrome-devtools

lazy-loading