Как создать плавающую полосу прокрутки, как на iPhone?

Question

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

Кто-нибудь есть указатели?

Answer 1

Во-первых, я бы начал с некоторых вариантов. Azoff имеет прокручиваемый плагин, чтобы вы начали .

Кроме того, удалите это из плагина:

.css({"cursor":"url("+o.icons.open+"), default", "overflow-y": "auto"})

Заменить на:

.css({"cursor":"url("+o.icons.open+"), default"})

В вашем коде, используя страницу плагина в качестве примера:

$(function() {
  $("#overscroll").overscroll();
  $("#overscroll").hover(
    function() { $(this).css({'overflow-y':'scroll'}); },
    function() { $(this).css({'overflow-y':'hidden'}); }
  );
});

Показывает прокрутку при наведении. Вы также можете настроить событие $("#overscroll").scroll(), чтобы скрыть / показать его, просто имейте в виду, что скрытие или отображение вызовет сам прокрутку, вызывая бесконечный цикл событий. Вам нужно будет установить некоторые проверки для обратного вызова, чтобы убедиться, что это не скрытие полосы прокрутки, которое вызывает событие прокрутки (оно находится при перетаскивании ... поэтому мышь вверх и колесо прокрутки проверяются?).