У меня есть div, который имеет 3 строки. Мой код находится в начальной загрузке. Я хочу поместить горизонтальную полосу прокрутки ниже первой строки и выше оставшихся 2 строк, то есть между первой и второй строкой. И когда я прокручиваю, содержимое всех трех строк должно прокручиваться одновременно. Как я могу это сделать? Это то, что я пробовал до сих пор

<div id="main-content">
    <div class="row sample_data">
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">Year</div>
            <div class="col-sm-3 time1">Jan'16</div>
            <div class="col-sm-3 time2">Feb'16</div>
            <div class="col-sm-3 time3">Mar'16</div>
            <div class="col-sm-3 time4">Apr'16</div>
        </div>
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">revenue</div>
            <div class="col-sm-3">230</div>
            <div class="col-sm-3">287.5</div>
            <div class="col-sm-3">359.375</div>
            <div class="col-sm-3">449.21875</div>
        </div>
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">Gross Margin</div>
            <div class="col-sm-3">230</div>
            <div class="col-sm-3">287.5</div>
            <div class="col-sm-3">359.375</div>
            <div class="col-sm-3">449.21875</div>
        </div>
    </div>
</div>

CSS:

    #main-content > .row > .row:first-child {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    #main-content > .row > .row {
        overflow: hidden;
        white-space: nowrap;
    }
#main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:none;
    display:inline-block;
    white-space:normal;
    vertical-align:top;
}

Пожалуйста, помогите мне. Спасибо.

0
Ashish 18 Дек 2015 в 10:07

3 ответа

Лучший ответ

Используя scrollLeft() из jQuery, измените позицию прокрутки 2-го и 3-го делений.

Образец кода.

$('#top').scroll(function () {
    $('#bottom').scrollLeft($(this).scrollLeft());
});

Рабочая скрипка

0
Venugopal 18 Дек 2015 в 07:53

Переполнения: auto для содержащих элементов будет достаточно:

#main-content > .row{
    float:none;
    display:inline-block;
    overflow: auto;
    vertical-align:top;
}
#main-content > .row > .row{
  white-space: no-wrap;
}
0
Bhojendra Rauniyar 18 Дек 2015 в 07:11

Вы можете использовать этот класс

#main-content > .row > .row:nth-child(2) {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
0
narendra.lodhi 18 Дек 2015 в 07:30