Manually trigger a scroll event of DOM element?

Question

I have two independent web elements, if I scroll the content of one element, I also want the 2nd element scroll at same time. Here is an example: https://stackedit.io

I did the following code, but it is not working:

element.find('.fullscreen-mk-content-textarea').on('scroll', function(e){
    // first element will trigger this event, then manully trigger the 
    // the scroll of the 2nd element. It's my plan. 
    console.log(e); // works
    element.find('.right-side').trigger('scroll'); // doesn't work...
});

What shall I do?

Romeo's answer actually works, just don't forget that ID selector uses hash (#) instead of full stop (.) Hope this helped some beginner like me, who tries to find out how to trigger event on scroll. — Norwak
– Norwak, Commented Jun 30, 2019 at 14:59

Firanolfind · Accepted Answer · 2018-08-17 08:10:10Z

19

Vanilla Javascript

var el = document.querySelector(".right-side");

el.dispatchEvent(new Event('scroll'));

edited Aug 17, 2018 at 8:10

answered Sep 4, 2017 at 12:36

Firanolfind

1,6052 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vishnu Y S Over a year ago

Is there a jQuery code to do exactly the same thing?

Firanolfind Over a year ago

If .trigger('scroll') is not working, then $(document).get(0).dispatchEvent(new Event('scroll'));

Romeo · Accepted Answer · 2014-10-08 08:25:43Z

5

Try this jsFiddle.

$('.e1').scroll(function(e){
    $('.e2').scrollTop(parseInt($('.e1').scrollTop()));
});

answered Oct 8, 2014 at 8:25

Romeo

5315 silver badges20 bronze badges

1 Comment

Tim Visser Over a year ago

Be wary using parseInt(...) here, because there could be floating point values when the user zoomed his/her browser in/out.

jfriend00 · Accepted Answer · 2014-10-08 08:25:37Z

4

You can just set the scrollTop value of the other to match. That will cause it to scroll a desired amount. That's how you scroll something. It won't cause it to scroll by trying to trigger a scroll event. A scroll event is an indicator of some scroll motion, not something that causes scroll motion.

If using jQuery, you can use .scrollTop() to retrieve the current value of the scroll or .scrollTop(val) to set the amount of scroll.

edited Oct 8, 2014 at 8:25

answered Oct 8, 2014 at 8:18

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

Manually trigger a scroll event of DOM element?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related