Как мы можем добавить дополнительную горизонтальную полосу прокрутки к существующей таблице или div, у которых уже есть горизонтальная полоса прокрутки и они работают синхронно?

-1
Louay Alosh

2 ответа

Это может быть легко сделано этим.

$(function(){
    $(".wmd-view-topscroll").scroll(function(){
        $(".wmd-view")
            .scrollLeft($(".wmd-view-topscroll").scrollLeft());
    });
    $(".wmd-view").scroll(function(){
        $(".wmd-view-topscroll")
            .scrollLeft($(".wmd-view").scrollLeft());
    });
});
.wmd-view-topscroll, .wmd-view {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 300px;
    border: none 0px RED;
}

.wmd-view-topscroll { height: 20px; }
.wmd-view { height: 200px; }
.scroll-div1 { 
    width: 1000px; 
    overflow-x: scroll;
    overflow-y: hidden;
}
.scroll-div2 { 
    width: 1000px; 
    height:20px;
}
`
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wmd-view-topscroll">
    <div class="scroll-div1">
    </div>
</div>
<div class="wmd-view">
    <div class="scroll-div2">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet ultricies ex, sit amet pretium ipsum. Duis orci arcu, euismod et leo tincidunt, pharetra molestie tellus. Morbi accumsan convallis massa, quis finibus libero rhoncus at. Nunc porta nisl vel lectus feugiat tincidunt. Aliquam mollis nibh sed nibh varius dapibus. Nullam varius, magna aliquet pellentesque egestas, quam felis malesuada felis, vel dictum nibh massa sit amet eros. Sed eu mauris ut libero luctus semper ac eu turpis. Mauris non pulvinar eros. Suspendisse suscipit tristique risus et dictum. Proin nec mi sit amet massa placerat dictum. Pellentesque cursus, magna a vestibulum finibus, arcu arcu viverra nunc, sed pharetra magna libero non nulla.

Vestibulum non odio tristique nisl venenatis commodo. Sed elementum quam vel metus condimentum, non blandit sapien tempus. Suspendisse mollis velit vel risus hendrerit fermentum. In nec sodales lectus. Integer pharetra bibendum justo vel fermentum. Praesent mollis, turpis ac semper eleifend, diam metus eleifend arcu, nec dictum nulla erat ut sem. Integer urna nisl, venenatis in malesuada id, tincidunt eu dui. Nulla eget bibendum purus. Phasellus ac consectetur arcu, nec aliquam eros. Nullam laoreet tempor lectus, tincidunt maximus ligula ullamcorper euismod.
    </div>
</div>

Если я правильно понял, вы можете попробовать это:

$(function() {
  $(".wmd-view-topscroll").scroll(function() {
    $(".wmd-view")
      .scrollLeft($(".wmd-view-topscroll").scrollLeft());
  });
  $(".wmd-view").scroll(function() {
    $(".wmd-view-topscroll")
      .scrollLeft($(".wmd-view").scrollLeft());
  });
});
.wmd-view-topscroll,
.wmd-view {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 300px;
  border: none 0px RED;
}

.wmd-view-topscroll {
  height: 20px;
}

.wmd-view {
  height: 150px;
}

.scroll-div1 {
  width: 1000px;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 20px;
}

.scroll-div2 {
  width: 1000px;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wmd-view-topscroll">
  <div class="scroll-div1">
  </div>
</div>
<div class="wmd-view">
  <div class="scroll-div2">
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    content content content content content content content content content content content content content content content content content content content
  </div>
</div>

58517059