CODEWITHSUNDEEP
jquery
Jason Howard
Jason Howard

Reputation: 1586

Scroll two elements simultaneously - Prevent event on scroll

I'd like to prevent the first function from executing if it's the second event that cause the first to fire.

$('.mygrid').on('scroll', function () {
  $('.mygridheading').scrollLeft($(this).scrollLeft());
});
    
$('.mygridheading').on('scroll', function () {        
  $('.mygrid').scrollLeft($(this).scrollLeft());
});

Any thoughts on how to do this?

Upvotes: 1

Views: 318

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

The issue: Your elements "scroll" Events are recursively calling each other.

Some possible Solutions:

Remember the element which last received a "mouseenter" - that's clearly the only candidate to have eventually a Scroll Event attached to it:

const $el = $(".scrollX");
let EL;

$el.on({
  mouseenter() { EL = this },
  scroll() { $el.not(EL).scrollLeft(EL.scrollLeft) }
});
.scrollX {
  overflow-x: scroll;
}
<div class="scrollX" id="a">
  <p style="width: 300vw">Hold SHIFT and scroll</p>
</div>
    
<div class="scrollX" id="b">
  <p style="width: 300vw">This example should prevent recursive scroll event triggers</p>
</div>
    
<div class="scrollX" id="c">
  <p style="width: 300vw">Hold SHIFT and scroll</p>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

Or -

Capture the x scroll value, and wait for a "next tick" using setTimeout.

const $el = $(".scrollX");
let x = 0;

$el.on("scroll", function(ev) {
  x = this.scrollLeft;
  setTimeout(() => {
    $el.not(this).scrollLeft(x);
  }, 0);
});
.scrollX {
  overflow-x: scroll;
}
<div class="scrollX">
  <p style="width: 300vw">Hold SHIFT and scroll</p>
</div>
<div class="scrollX">
  <p style="width: 300vw">This example should prevent recursive scroll event triggers</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Upvotes: 1

Related Questions