Пользовательская визуализация полосы прокрутки с HTML / CSS / JavaScript

Question

Я создаю узкоспециализированное приложение, в котором я хочу экспериментировать с пользовательской полосой прокрутки.

В идеале я бы отключил встроенную полосу прокрутки и нарисовал свою. Страница будет выглядеть и ощущаться как любая другая страница, просто полоса прокрутки не будет видна. Клавиши со стрелками, колесо прокрутки и любые другие способы прокрутки страницы должны работать так же, как и на платформе, на которой работает мое веб-приложение.

Одним из способов было бы поместить содержимое в div обертки, который абсолютно позиционирован, с помощью top: 0; bottom: 0; width: 100%; overflow: hidden;. При таком подходе мне пришлось бы повторно реализовать прокрутку самостоятельно, слушая события клавиатуры и колеса прокрутки. Это вряд ли идеально, особенно трудно воспроизвести поведение страницы вверх и страницы вниз. Сколько пикселей я должен прокрутить на страницу вниз? Количество варьируется от платформы к платформе. Я верю, что магические мыши, «ускоряющие» свитки, также будут трудно воспроизвести.

Каковы мои варианты реализации этой пользовательской визуализации полосы прокрутки?

Примечание: Мне известно об исследованиях, проведенных в отношении пользовательских полос прокрутки и удобства использования. Вам не нужно указывать на это, я до боли осознаю это :) Я не говорю просто о перекрашивании полосы прокрутки. Думайте об этом больше с точки зрения редактора фильмов или музыкального секвенсора. Это очень нестандартный и специализированный материал.

Обновление: http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour

Answer 1

Вот потенциальное решение с использованием 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) + "%!");
  });
});

И здесь это работает (хотя у меня нет собственного дисплея полосы прокрутки).

Answer 2

Полагаю, поскольку это узкоспециализированная вещь, нет необходимости говорить о юзабилити: -)

Единственное, что мне известно, это реализовать ваш собственный захват событий - на основе нажатия клавиш, 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-wheel