Верхняя и нижняя горизонтальная полоса прокрутки

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

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

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

Содержимое в фактическом div выбирается из вызова AJAX. Я попытался включить элемент div/p с шириной auto, который возвращается из вызова AJAX вместе с данными, чтобы иметь один элемент, который я могу получить ширину и применить к моему второму div. Проблема в том, что когда возвращается div/p tag, он охватывает только видимую часть содержимого div (проверяется границами). Мне нужно, чтобы он охватывал весь контент div.

Любые хорошие решения для их вторых полос прокрутки с переменной шириной? Решения JQuery/Javascript приветствуются.

enter image description here

источник

2015-01-15 Kirk Logan

Можете ли вы привести пример кода плюс пример макета (используя краску), чтобы показать конечный результат? Трудно представить себе, чего вы действительно хотите достичь. –

Возможно, это помогает https://github.com/dreamerslab/jquery.actual – HerrSerker

Я загрузил изображение краски, чтобы помочь прояснить. –

Я придумал эту скрипку:

http://jsfiddle.net/371g6mfa/

В основном сво JQuery-UI слайдер демо от: http://jqueryui.com/slider/#side-scroll с дополнительно кодом:

HTML: после первого слайдер (если вы положите его сверху, происходят какие-то странные вещи

<div class="scroll-bar-wrap ui-widget-content ui-corner-top" id="slider2"> 
    <div class="scroll-bar"></div> 
</div>

JS:

//move things around for slider2 
    slider2 = $('#slider2'); 
    slider2.css({ 
     top: (scrollContent.outerHeight() + slider2.outerHeight() * 2 - 1) * (-1) 
    }); 
    scrollPane.css({ 
     'padding-top': slider2.height() 
    }).height(scrollContent.height() + slider2.height() + 1);

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

источник

2015-01-15 17:45:32 ggzone

Верхняя и нижняя горизонтальная полоса прокрутки

ответ

Смежные вопросы