Блог

Главная - Вопросы по программированию - Как прокрутить два div одновременно в Mozilla Firefox?

Как прокрутить два div одновременно в Mozilla Firefox?

#jquery #css #twitter-bootstrap #bootstrap-modal #mozilla

#jquery #css #twitter-bootstrap #bootstrap-модальный #mozilla

Вопрос:

У меня есть два div в модальном bootstrap.

 <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. Кто-нибудь может помочь мне найти, в чем проблема?

Комментарии:

1. Может быть, попробуйте это: $(".forScroll").scroll(function() { $(".forScroll").not(this).scrollTop($(this).scrollTop()); }); работает для меня в Firefox

Ответ №1:

Как упоминает Карстен в комментарии, вам нужно добавить .not(this) в свой jQuery, чтобы убедиться, что он настраивает прокрутку только для div, который вы в данный момент не прокручиваете.

ДЕМОНСТРАЦИЯ должна быть проверена на всю страницу:

 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>