горизонтальная полоса прокрутки сверху и снизу таблицы

Question

У меня на странице очень большой table. Поэтому я решил поставить горизонтальную полосу прокрутки в нижней части таблицы. Но я бы хотел, чтобы эта полоса прокрутки была также сверху на столе.

Что у меня есть в шаблоне это:

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">

Это возможно сделать только в HTML и CSS?

Answer 1

Чтобы смоделировать вторую горизонтальную полосу прокрутки поверх элемента, поместите «пустышку» div над элементом с горизонтальной прокруткой, достаточно высокой для полосы прокрутки. Затем присоедините обработчики события «scroll» для фиктивного элемента и реального элемента, чтобы синхронизировать другой элемент при перемещении полосы прокрутки. Фиктивный элемент будет выглядеть как вторая горизонтальная полоса прокрутки над реальным элементом.

Для живого примера см. this fiddle

Вот код :

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

CSS:

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JS:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

Answer 2

Попробуйте использовать плагин jquery.doubleScroll :

jQuery:

$(document).ready(function(){
  $('#double-scroll').doubleScroll();
});

CSS:

#double-scroll{
  width: 400px;
}

HTML:

<div id="double-scroll">
  <table id="very-wide-element">
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

Прежде всего, отличный ответ, @StanleyH.Если кому-то интересно, как сделать контейнер с двойной прокруткой с динамической шириной:

css

.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
.wrapper1 { height: 20px; }
.div1 { height: 20px; }
.div2 { overflow: none; }

js

$(function () {
    $('.wrapper1').on('scroll', function (e) {
        $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft());
    }); 
    $('.wrapper2').on('scroll', function (e) {
        $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
    });
});
$(window).on('load', function (e) {
    $('.div1').width($('table').width());
    $('.div2').width($('table').width());
});

html

<div class="wrapper1">
    <div class="div1"></div>
</div>
<div class="wrapper2">
    <div class="div2">
        <table>
            <tbody>
                <tr>
                    <td>table cell</td>
                    <td>table cell</td>
                    <!-- ... -->
                    <td>table cell</td>
                    <td>table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

демо

http://jsfiddle.net/simo/67xSL/

Answer 4

Вы можете использовать плагин jQuery, который сделает всю работу за вас:

• https://github.com/avianey/jqDoubleScroll

Плагин будет обрабатывать всю логику за вас.

Answer 5

без JQuery (2017)

Поскольку вам может не понадобиться JQuery, вот рабочая версия Vanilla JS, основанная на ответе @StanleyH:

var wrapper1 = document.getElementById('wrapper1');
var wrapper2 = document.getElementById('wrapper2');
wrapper1.onscroll = function() {
  wrapper2.scrollLeft = wrapper1.scrollLeft;
};
wrapper2.onscroll = function() {
  wrapper1.scrollLeft = wrapper2.scrollLeft;
};

#wrapper1, #wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
#wrapper1{height: 20px; }
#wrapper2{height: 100px; }
#div1 {width:1000px; height: 20px; }
#div2 {width:1000px; height: 100px; background-color: #88FF88;
overflow: auto;}

<div id="wrapper1">
    <div id="div1">
    </div>
</div>
<div id="wrapper2">
    <div id="div2">
    aaaa bbbb cccc dddd aaaa bbbb cccc 
    dddd aaaa bbbb cccc dddd aaaa bbbb 
    cccc dddd aaaa bbbb cccc dddd aaaa 
    bbbb cccc dddd aaaa bbbb cccc dddd
    </div>
</div>

Answer 6

На основе решения @StanleyH я создал директиву AngularJS , демонстрацию по jsFiddle .

Простота в использовании:

<div data-double-scroll-bar-horizontal> {{content}} or static content </div>

НетТребуется jQuery.

Answer 7

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

Протестировано: 4 версии Firefox (затронуты 100%), 4 версии Chrome (затронуты 50%).

Вот мой jsfiddle . Вы можете обойти это, имея переменную on / off (true / false), которая позволяет запускать одновременно только одно событие onScroll ():

var scrolling = false;
$(".wrapper1").scroll(function(){
    if(scrolling) {
      scrolling = false;
      return true;
    }
    scrolling = true;
    $(".wrapper2")
        .scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
    if(scrolling) {
      scrolling = false;
      return true;
    }
      scrolling = true;
    $(".wrapper1")
        .scrollLeft($(".wrapper2").scrollLeft());
});

Поведение проблемы с принятым ответом:

Фактически желаемое поведение:

Итак, почему это происходит? Если вы выполните код, вы увидите, что wrapper1 вызывает scrollLeft для wrapper2, а wrapper2 вызывает scrollLeft для wrapper1 и повторяет это бесконечно, поэтому у нас есть проблема бесконечного цикла. Или, скорее: продолжающаяся прокрутка пользователя конфликтует с вызовом прокрутки от wrapperx, возникает конфликт событий, и конечным результатом является отсутствие скачков в полосах прокрутки.

Надеюсь, это поможет кому-то еще!

Answer 8

Связывание скроллеров работало, но в том виде, в котором оно написано, оно создает цикл, который замедляет прокрутку в большинстве браузеров, если щелкнуть часть более легкой полосы прокрутки и удерживать ее (а не при перетаскивании скроллера).

Я исправил это с флагом:

$(function() {
    x = 1;
    $(".wrapper1").scroll(function() {
        if (x == 1) {
            x = 0;
            $(".wrapper2")
                .scrollLeft($(".wrapper1").scrollLeft());
        } else {
            x = 1;
        }
    });


    $(".wrapper2").scroll(function() {
        if (x == 1) {
            x = 0;
            $(".wrapper1")
                .scrollLeft($(".wrapper2").scrollLeft());
        } else {
            x = 1;
        }
    });
});

Answer 9

В vanilla Javascript / Angular вы можете сделать это следующим образом:

scroll() {
    let scroller = document.querySelector('.above-scroller');
    let table = document.querySelector('.table');
    table.scrollTo(scroller.scrollLeft,0);
  }

HTML:

<div class="above-scroller" (scroll)="scroll()">
  <div class="scroller"></div>
</div>
<div class="table" >
  <table></table>
</div>

CSS:

.above-scroller  {
   overflow-x: scroll;
   overflow-y:hidden;
   height: 20px;
   width: 1200px
 }

.scroller {
  width:4500px;
  height: 20px;
}

.table {
  width:100%;
  height: 100%;
  overflow: auto;
}

Answer 10

Расширяя ответ Стэнли и пытаясь найти необходимый минимум, вот что я реализовал:

JavaScript (вызывается один раз откуда-то вроде $(document).ready()):

function doubleScroll(){
        $(".topScrollVisible").scroll(function(){
            $(".tableWrapper")
                .scrollLeft($(".topScrollVisible").scrollLeft());
        });
        $(".tableWrapper").scroll(function(){
            $(".topScrollVisible")
                .scrollLeft($(".tableWrapper").scrollLeft());
        });
}

HTML (обратите внимание, что ширина будет изменять длину полосы прокрутки):

<div class="topScrollVisible" style="overflow-x:scroll">
    <div class="topScrollTableLength" style="width:1520px; height:20px">
    </div>
</div>
<div class="tableWrapper" style="overflow:auto; height:100%;">
    <table id="myTable" style="width:1470px" class="myTableClass">
...
    </table>

Вот и все.