CODEWITHSUNDEEP
javascriptjquery
Nicolas S.Xu
Nicolas S.Xu

Reputation: 14524

Manually trigger a scroll event of DOM element?

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?

Upvotes: 5

Views: 29931

Answers (3)

Firanolfind
Firanolfind

Reputation: 1603

Vanilla Javascript

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

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

Upvotes: 19

Romeo
Romeo

Reputation: 531

Try this jsFiddle.

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

Upvotes: 5

jfriend00
jfriend00

Reputation: 707158

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.

Upvotes: 4

Related Questions