Question

我试图让2个div同步滚动。

方法：将“ scroll”侦听器应用于两个div，并将当前的“ scrollTop”转发给另一个。

问题：div A一旦获得onScroll-Event，就会将scrollTop转发给divB。DivB依次注意到更改并触发一个onScroll-Event，这也会更改div A等...

可能的解决方案：

全局“ ignoreScroll”变量-不适用
找到了一个小脚本并尝试理解它：syncscroll

我找到了发生魔术的地方，但我真的不知道这为什么起作用。

示例（工作和不工作）：

function syncScroll(elements, stutter) {
  elements.each( function( i, e_src ) {
    $(e_src).on('scroll', function() {
      elements.each( function( i2, e_dst ) {
      
        if( e_src != e_dst ) { // no self-update
          let scrollTop = $(e_src).scrollTop(); // read scrollTop
          
          // Here comes the magic ---
          if( !stutter ) {
            let savedScrollTop = $(e_src).attr('savedScrollTop') || 0; // read savedScrollTop
            if( scrollTop == savedScrollTop ) { // skip if equal (no update required)
              return;
            }
            $(e_dst).attr('savedScrollTop', scrollTop); // write savedScrollTop
          }
          // Here ends the magic ---
          
          $(e_dst).scrollTop(scrollTop); // write scrollTop
        }
        
      } );
    } );
  } );
}

syncScroll($('#divA,#divB'), true);
syncScroll($('#divC,#divD'), false);

div.scroll {
  border: 1px solid black;
  overflow-y: scroll;
  height: 100px;
  display: inline-block;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<span style='color: red;'>use mouse to scroll</span>

<div style="float: left; width: 210px; border-right: 1px dashed grey;">
  <h3>Non-Working</h3>
  <div class='scroll' id='divA'>
    .<br/>-<br/>.<br/>-<br/>.<br/>STUTTER<br/>.<br/>-<br/>.<br/>-<br/>.<br/>-<br/>
  </div>
  <div class='scroll' id='divB'>
    .<br/>-<br/>.<br/>-<br/>.<br/>STUTTER<br/>.<br/>-<br/>.<br/>-<br/>.<br/>-<br/>
  </div>
</div>

<div style="float: left; width: 210px;">
  <h3>Working</h3>
  <div class='scroll' id='divC'>
    .<br/>-<br/>.<br/>-<br/>.<br/>SMOOTH :)<br/>.<br/>-<br/>.<br/>-<br/>.<br/>-<br/>
  </div>

  <div class='scroll' id='divD'>
    .<br/>-<br/>.<br/>-<br/>.<br/>SMOOTH :)<br/>.<br/>-<br/>.<br/>-<br/>.<br/>-<br/>
  </div>
</div>

问题 ScrollTop和savedScrollTop既可以设置也可以读取，并且不应有区别，但显然可以，否则，此技巧将不起作用。有异步的事情发生吗？

简而言之：为什么这样做？

同步容器的滚动（防止滚动事件乒乓-口吃）

0 个答案: