Как я могу получить горизонтальные полосы прокрутки в вершине и нижней части отделения?
Так как я вполне уверен нет никакого собственного HTML или CSS способа сделать это, я открыт для выполнения этого с JavaScript. Очевидно, я могу получить полосу прокрутки у основания своего использования отделения overflow: auto в CSS. Есть ли некоторый JavaScript, который мог "клонировать" полосу прокрутки от нижней части и поместить ее наверху отделения? Возможно, существует иначе?
2 ответа
Вы можете создать новый фиктивный элемент над настоящим, с такой же шириной содержимого, чтобы получить дополнительную полосу прокрутки, а затем связать полосы прокрутки вместе с для прокрутки событий.
функция DoubleScroll (элемент) {var scrollbar = document.createElement ('div'); scrollbar.appendChild (document.createElement ('div')); scrollbar.style.overflow = 'авто'; scrollbar.style.overflowY = 'скрытый'; scrollbar.firstChild.style.width = element.scrollWidth + 'px'; scrollbar.firstChild.style.paddingTop = '1px'; scrollbar.firstChild.appendChild (document.createTextNode ('\ xA0')); scrollbar.onscroll = функция () {element.scrollLeft = scrollbar.scrollLeft; }; element.onscroll = function () {scrollbar.scrollLeft = element.scrollLeft; }; element.parentNode.insertBefore (полоса прокрутки, элемент); } DoubleScroll (document.getElementById ('doublescroll')); #doublescroll {overflow: auto; переполнение-y: скрыто; } #doublescroll p {margin: 0; заполнение: 1em; белое пространство: nowrap; } Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat.
Это доказательство концепции, которую можно улучшить, например. путем опроса или прослушивания событий, которые могут изменить scrollWidth из элемента , например, изменение размера окна при использовании длины % , изменении размера шрифта или изменении содержимого управляемый другими скриптами. Также есть (как обычно) проблемы с IE, выбирающим отображение горизонтальных полос прокрутки внутри элемента, и с масштабированием страницы IE7. Но это только начало.
Вы можете использовать jQuery UI Slider control . Вы можете прочитать руководство по достижению этого эффекта онлайн на NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/making-a- content-slider-with-jquery-ui /