Как я могу получить горизонтальные полосы прокрутки вверху и внизу div?

Question

Поскольку я почти уверен, что для этого нет нативного HTML или CSS-метода, я открыт для этого с помощью JavaScript. Очевидно, что я могу получить полосу прокрутки внизу моего div, используя overflow: auto в CSS. Есть ли какой-нибудь JavaScript, который мог бы «клонировать» полосу прокрутки снизу и поместить ее в верхнюю часть div? Может есть другой способ?

Answer 1

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

function DoubleScroll(element) {
    var scrollbar = document.createElement('div');
    scrollbar.appendChild(document.createElement('div'));
    scrollbar.style.overflow = 'auto';
    scrollbar.style.overflowY = 'hidden';
    scrollbar.firstChild.style.width = element.scrollWidth+'px';
    scrollbar.firstChild.style.paddingTop = '1px';
    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
    scrollbar.onscroll = function() {
        element.scrollLeft = scrollbar.scrollLeft;
    };
    element.onscroll = function() {
        scrollbar.scrollLeft = element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
}

DoubleScroll(document.getElementById('doublescroll'));

#doublescroll
{
  overflow: auto; overflow-y: hidden; 
}
#doublescroll p
{
  margin: 0; 
  padding: 1em; 
  white-space: nowrap; 
}

<div id="doublescroll">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

Это подтверждение концепции, которую можно улучшить, например.путем опроса или прослушивания событий, которые могут изменить scrollWidth из element, например, изменение размера окна, когда используются длины %, изменения размера шрифта или изменения содержимого, вызванные другими скриптами.Существуют также (как обычно) проблемы, связанные с тем, что IE выбирает рендеринг горизонтальных полос прокрутки внутри элемента и масштабирование страницы в IE7.Но это только начало.

Answer 2

Вы можете использовать пользовательский интерфейс jQuery Ползунок . Вы можете прочитать руководство по достижению этого эффекта онлайн на NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/