Блог

у меня есть легенда для графика, который иногда прокручивается, а иногда нет.

К сожалению, когда появляется полоса прокрутки, она немного сдвигает все элементы влево. Таким образом, они не выстраиваются в общую линию (за пределами прокручиваемой области)

Пример: http://jsfiddle.net/3sKVR

Простым ответом было бы просто установить фиксированную ширину, но, к сожалению, это должно быть отзывчивым.

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

Любая помощь была бы высоко оценена (с подключением к Интернету!)

Сокращенная версия кода:

HTML:

 <div id="legend_cont">
    <div id="legend_list">
        <div id="legend">
            <div class="legend_row">
                <div class="legend_cell">
                    <div class="legend_colour" style="background-color:#ffb100"></div>
                </div>
                <div class="legend_cell">Merch G</div>
                <div class="legend_cell legend_value">$1423.24</div>
            </div>
            <div class="legend_row">
                <div class="legend_cell">
                    <div class="legend_colour" style="background-color:#ed5929"></div>
                </div>
                <div class="legend_cell">Merch L</div>
                <div class="legend_cell legend_value">$1351.07</div>
            </div>
            <div class="legend_row">
                <div class="legend_cell">
                    <div class="legend_colour" style="background-color:#3f9c35"></div>
                </div>
                <div class="legend_cell">Merch N</div>
                <div class="legend_cell legend_value">$1194.90</div>
            </div>
            <div class="legend_row">
                <div class="legend_cell">
                    <div class="legend_colour" style="background-color:#009bbb"></div>
                </div>
                <div class="legend_cell">Merch T</div>
                <div class="legend_cell legend_value">$1188.14</div>
            </div>
        </div>
    </div>
    <div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
    </div>
</div>
  

CSS:

 #legend_cont {
    height: 100%;
    border-left: 2px solid #ADADAD;
    width: 40%;
    float: right;
}
#legend_list {
    height: 169px;
    overflow: auto;
    margin: 20px 4% 20px 7%;
}
#legend {
    display: table;
    width: 90%;
}
.legend_row {
    display: table-row;
}
.legend_cell {
    display: table-cell;
    padding: 5px;
    vertical-align: middle;
}
.legend_colour {
    width: 10px;
    height: 20px;
    background-color: #c1c1c1;
    border-radius: 3px;
}
.legend_value {
    text-align: right;
}
#legend_total {
    height: 50px;
    line-height: 50px;
    width: 88%;
    border-top: 1px solid;
    margin-left: 8%;
}
#legend_total_value {
    float: right;
    padding-right: 5px;
}
  

1) Убедитесь, что всегда есть полоса прокрутки

CSS

 #legend_cont {
   overflow-y: scroll;
}
  

2) Используйте js для захвата переменной ширины полосы прокрутки (пример здесь)

3) Установите правильное заполнение в #legend_total_value равным этой переменной в jquery.

JS

 $('#legend_total_value').css('padding-right', wScroll);​
  

Попробуйте применить padding-right , чтобы компенсировать размер полосы прокрутки, когда ее там нет, и соответствующим образом расположить итоговое значение.

 #legend_list {
 height: 169px;
 overflow: auto;
 margin: 20px 4% 20px 7%;
 padding-right:15px;
}
  

ДЕМОНСТРАЦИЯ