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

Question

我在 bootstrap 模态中有两个 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。谁能帮我看看问题出在哪里？

Answer 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>

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

How to scroll two div simultaneously on Mozilla Firefox?

css

jquery

mozilla

twitter-bootstrap

bootstrap-modal