同时滚动两个元素 - 防止滚动事件 [英] Scroll two elements simultaneously - Prevent event on scroll

问题描述

如果第一个函数是导致第一个函数触发的第二个事件，我想阻止第一个函数的执行.

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

对如何做到这一点有任何想法吗?

解决方案

问题:你的元素滚动"事件递归相互调用.

一些可能的解决方案:

记住上次收到 mouseenter" 的元素 - 这显然是唯一一个最终附加滚动事件的候选元素:

const $el = $(".scrollX");让 EL;$el.on({mouseenter() { EL = this },scroll() { $el.not(EL).scrollLeft(EL.scrollLeft) }});

.scrollX {溢出-x:滚动；}

<p style="width: 300vw">按住 SHIFT 并滚动</p>
<div class="scrollX" id="b"><p style="width: 300vw">这个例子应该防止递归滚动事件触发</p>

<div class="scrollX" id="c"><p style="width: 300vw">按住 SHIFT 并滚动</p>

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

或 -

捕获 x 滚动值，并使用 setTimeout 等待 下一个滴答声".

const $el = $(".scrollX");让 x = 0;$el.on("scroll", function(ev) {x = this.scrollLeft;setTimeout(() => {$el.not(this).scrollLeft(x);}, 0);});

.scrollX {溢出-x:滚动；}

<p style="width: 300vw">按住 SHIFT 并滚动</p>
<div class="scrollX"><p style="width: 300vw">这个例子应该防止递归滚动事件触发</p>

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

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?

解决方案

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>

这篇关于同时滚动两个元素 - 防止滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！