Пользовательская визуализация полосы прокрутки с HTML/CSS/JavaScript
Я создаю узкоспециализированное приложение, где я хочу экспериментировать с пользовательской полосой прокрутки.
Идеально, я отключил бы встроенную полосу прокрутки и потянул бы мое собственное. Страница посмотрела бы и чувствовала бы как любая другая страница, просто что полоса прокрутки не будет видима. Клавиши со стрелками, колесико прокрутки, и любой другой имеет в виду прокрутки страницы, должен работать, как исключено над платформой, на которой работает мое веб-приложение.
Один путь состоял бы в том, чтобы поместить содержание в отделение обертки, которое абсолютно расположено, с top: 0; bottom: 0; width: 100%; overflow: hidden; С этим подходом я должен был бы повторно реализовать прокрутку меня путем слушания событий клавиатуры и колесика прокрутки. Это едва идеально, особенно страница и страница вниз, поведение было бы трудно копировать. Сколько пикселей я должен прокрутить на странице вниз? Число варьируется от платформы до платформы. Я полагаю, что волшебные прокрутки "ускорения" мыши было бы трудно копировать также.
Каковы мои опции в реализации этой пользовательской визуализации полосы прокрутки?
Примечание: Я знаю об исследовании, которое было проведено относительно пользовательских полос прокрутки и удобства использования. Вы не должны указывать на это, я мучительно знаю об этом :) Я не говорю о просто переокраске полосы прокрутки. Думайте о нем больше с точки зрения редактора фильмов или музыкального секвенсера. Это - очень пользовательский и специализированный материал.
Обновление: http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour
2 ответа
Вот потенциальное решение с использованием javascript и css. Идея заключается не в том, чтобы убрать полосу прокрутки, а в том, чтобы просто скрыть ее и позволить ей продолжать выполнять свою работу.
Концепция:
Здесь полоса прокрутки фактического содержимого выведена за пределы обертки. Это предотвращает ее видимость (обертка имеет overflow:hidden;), но не мешает ей работать.
|---------WRAPPER-----------| ||--------CONTENT-----------|---| || |[^]| || |[0]| || |[0]| || |[ ]| || |[ ]| || |[v]| ||--------------------------|---| |---------------------------|
Реализация:
Разметка:
<div class="wrapper">
<div class="content">
<p>1Hello World</p>
<p>2Hello World</p>
...
</div>
</div>
И скрипт (я использовал jquery, но его легко можно переписать на чистом javascript):
$(function() {
// initialize: both need to have the same height and width (width default: 100%)
// these could go on your stylesheet of course.
$("div.wrapper").css({ height: "200px", overflow: "hidden" });
$("div.content").css({ height: "200px", overflow: "auto" });
// now extend the content width beyond the wrapper
$("div.content").width($("div.content").width() + 22); // 22px is the width of IE scrollbars
// prevent highlight dragging from scrolling the wrapper div (thereby displaying the bars)
$("div.wrapper").scroll(function() {
this.scrollLeft = 0;
this.scrollTop = 0;
});
$("div.content").scroll(function() {
// update custom scrollbar display using this.scrollTop as a percentage of this.clientHeight
// alert("Place slider at " + ((100 * this.scrollTop) / this.clientHeight) + "%!");
});
});
И вот он работает (хотя у меня нет пользовательского отображения полосы прокрутки).
Полагаю, поскольку это узкоспециализированная вещь, нет необходимости говорить об удобстве использования: -)
Единственное, что я знаю, это то, что реализовать собственный захват событий - на основе нажатия клавиш, mousedown и т. д.- должно быть легко получить текущую позицию страницы (вроде виртуальной - потому что у вас все будет загружено, и вы просто измените настраиваемое «окно просмотра»).
Я настоятельно рекомендую ознакомиться с отличными руководствами и документами по QuirksMode:
События нажатия клавиш: http://www.quirksmode.org/js/keys.html
События мыши: http: // www.quirksmode.org/js/events_mouse.html
Я не уверен насчет колеса прокрутки - я не слышал о технике, позволяющей имитировать это, но вы наверняка сможете что-то найти или закодировать.
РЕДАКТИРОВАТЬ: Я нашел некоторую низкоуровневую реализацию JS колеса прокрутки (колесо управления): http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll- колесо