如何在 Mozilla Firefox 上同时滚动两个 div？答案

【问题标题】：How to scroll two div simultaneously on Mozilla Firefox?如何在 Mozilla Firefox 上同时滚动两个 div？
【发布时间】：2021-02-17 21:04:37
【问题描述】：

我在引导模式中有两个 div。

<div class="col-md-6">
   <div class="textarea_before forScroll" >        
   </div> 
</div>
<div class="col-md-6">
   <div class="textarea_after forScroll" >        
   </div> 
</div>

我给了这样的风格

.textarea_before,.textarea_after{
        height: calc(100vh - 300px);
        border: 1px solid black;
        padding:5px;
        background-color: #f2f2f2;
        overflow: scroll;
        scroll-behavior: smooth;
        display: flex;
    }

我写过这样的 jQuery 代码

var subCatContainer = $(".forScroll");
subCatContainer.scroll(function() {
   subCatContainer.scrollTop ($(this).scrollTop ());
});

它在 Chrome 中运行良好。但它不适用于 Mozilla Firefox。谁能帮我找出问题所在？

【问题讨论】：

也许试试这个：$(".forScroll").scroll(function() { $(".forScroll").not(this).scrollTop($(this).scrollTop()); }); 在 Firefox 中为我工作

标签： jquery css twitter-bootstrap bootstrap-modal mozilla

【解决方案1】：

正如 Carsten 在评论中提到的，您需要在 jQuery 中添加 .not(this) 以确保它仅将滚动调整到您当前未滚动的 div。

DEMO 必须检查整页：

var subCatContainer = $(".forScroll");
subCatContainer.scroll(function() {
   subCatContainer.not(this).scrollTop($(this).scrollTop ());
});

.textarea_before,.textarea_after{
  height: calc(100vh - 300px);
  border: 1px solid black;
  padding:5px;
  background-color: #f2f2f2;
  overflow: scroll;
  scroll-behavior: smooth;
  display: flex;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-6">
     <div class="textarea_before forScroll" >   
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
     </div> 
  </div>
  <div class="col-md-6">
     <div class="textarea_after forScroll" >   
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
       Lorem <br>
     </div> 
  </div>
</div>

【讨论】：