Две полосы прокрутки для одного div или таблицы в CSS

Question

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

html css

-2

Louay Al-osh 23 Окт 2019 в 09:55

Можете ли вы объяснить, почему вы хотите добавить две горизонтальные полосы, если у вас уже есть одна?

–

Ahmed Ali

23 Окт 2019 в 10:01

Вы правы, но когда у вас большой стол и вам нужно дать возможность пользователю прокручивать, где бы он ни находился.

–

Louay Al-osh

23 Окт 2019 в 10:10

Answer 1

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

$(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>

2

Ahmed Ali 23 Окт 2019 в 10:05

Большое спасибо, это очень хорошее решение, к сожалению, у нас есть JS. Я надеялся, что мы сможем сделать это без дополнительной библиотеки, но это не проблема. Спасибо =D

–

Louay Al-osh

23 Окт 2019 в 10:12

Все, что вы можете сделать в jQuery, вы можете сделать и в JavaScript. В конце концов, jQuery делает это в JavaScript, верно?

–

Sinan Samet

23 Окт 2019 в 10:17

Да, вы действительно можете сделать это в javascript, но подход JQUERY удобнее, быстрее и проще в использовании. Дайте мне знать, если вы хотите узнать, как это сделать.

–

Ahmed Ali

23 Окт 2019 в 10:20

1

Ты отметил не того парня, приятель

–

Sinan Samet

16 Янв 2020 в 11:05

Алош, поставьте зеленую галочку, чтобы убедиться, что мой ответ помог вам, и что это будет правильный ответ для людей, имеющих такую же проблему.

–

Ahmed Ali

16 Янв 2020 в 11:07

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

Источник

0

Gogo Dev 23 Окт 2019 в 10:04

Две полосы прокрутки для одного div или таблицы в CSS

2 ответа

Похожие вопросы

Новые вопросы

html