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

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

Ответы

Ответ 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>