Как получить полосы прокрутки для отображения в Mobile Safari?

Question

Плагин выбора времени jQuery, который я написал, использует div в качестве содержащего блока для списка времени, а в Mobile Safari нет полос прокрутки, чтобы указать, что доступно больше времени, чем видимое. Я знаю об использовании двух пальцев для прокрутки внутри div (по крайней мере, на iPad), но это работает, только если пользователь знает, что есть больше контента для прокрутки от до , и нет никаких признаков того, что он есть. Итак, мой вопрос: кто-нибудь смог получить полосы прокрутки для показа в Mobile Safari? Как ты это сделал?

Answer 1

Если вы используете iOS5.0 или более позднюю версию, я думаю, что вы должны использовать следующее:

-webkit-overflow-scrolling: auto (это стиль по умолчанию)

авто: прокрутка одним пальцем без импульса.

Другой доступный стиль -

-webkit-overflow-scrolling: touch

touch: прокрутка в собственном стиле. Задание этого стиля приводит к созданию контекста разметки (например, непрозрачности, масок и преобразований).

В режиме touch полоса прокрутки будет видна, когда пользователь касается и прокручивает ее, но исчезает, когда она не используется. Если вы хотите, чтобы он всегда был виден, то этот старый пост поможет вам:

::-webkit-scrollbar {
    -webkit-appearance: none;// you need to tweak this to make it available..
    width: 8px;
}

Другой кусок кода для большого пальца @BJMC:

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Оригинальный источник

Редактировать: в отношении поведения этой демонстрации , вам следует использовать jQuery, потому что это вам очень поможет, $(document).ready(function(){//your code with timer}) коду с таймером потребуется сбросить свойство CSS на нормальный по истечении заданного времени (скажем, 5 секунд)

Для демонстрации (которую вы описали) это инициируется событием onhover, пожалуйста, отметьте это fiddle Я создал для этого.

Воспроизводит результаты в настольном браузере, а также будет работать на iPad, просто добавьте свой код таймера в соответствии с вашими требованиями.

Answer 2

Относительно исходного вопроса: лучшим решением для использования полос прокрутки было бы использование внешней библиотеки (уже рекомендованный iScroll хорош, но даже пользовательский интерфейс jQuery содержит полосы прокрутки ). Но отображение вездесущих полос прокрутки может отличаться от общего пользовательского интерфейса iOS (см. Ниже).

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

В iOS5 overflow: scroll функционирует должным образом, то есть позволяет прокручивать div вверх / вниз одним пальцем в пределах области, указанной размерами div. Но прокручиваемый div не имеет полос прокрутки. Это немного отличается от общего пользовательского интерфейса в iOS (5). Обычно также отсутствуют полосы прокрутки, но они появляются, когда пользователь начинает прокручивать область содержимого, и снова исчезают после прекращения события касания.

Answer 3

Чтобы ответить на комментарий Сэма Хаслера выше. Nicescroll 3 - это плагин jquery, который выполняет все, что вам нужно, с эффектом постепенного появления / исчезновения и работает во всех основных браузерах для мобильных устройств, планшетов и настольных компьютеров.

Код:

$(document).ready(function() {    
    $("html").niceScroll({styler:"fb",cursorcolor:"#000"});
    $("#divexample1").niceScroll();//or styles/options below
    $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
    $("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
  });

Answer 4

Если вы хотите, чтобы свиток был всегда видимым,

Не установить -webkit-overflow-scrolling: touch

затем установите пользовательский стиль для полосы прокрутки

::-webkit-scrollbar {
    -webkit-appearance: none;// you need to tweak this to make it available..
    width: 8px;
}

Вы теряете эффект импульса, но полоса прокрутки всегда будет там.

(протестировано под iPhone 4 / iOS 7)

Answer 5

Мобильное сафари, насколько я видел, не будет поддерживать полосы прокрутки. Лучший плагин, который я мог найти, чтобы выполнить работу - это this .

Его демоверсии доступны здесь . Он также имеет несколько предопределенных скинов в соответствии с вашим приложением.

вот пример того, что вы получите -

Answer 6

до ios5 вы не могли прокручивать внутренние div - так что вы, вероятно, не видите полосу прокрутки при попытке прокрутки, потому что ее нет.

Я не тестировал на ios5, но якобы прокрутка внутренних div теперь работает.

Если это не внутренний div, то вы сможете увидеть полосу прокрутки, когда она только прокручивается - это больше не только на ios - лев избавился также от всех собственных полос прокрутки. Их можно увидеть только при прокрутке окна или при первой загрузке окна.

Answer 7

По соглашению, полосы прокрутки в iOS не используются.

Для div с overflow: scroll единственный собственный способ прокрутки - два пальца.

Вы можете взглянуть на iScroll , библиотека JavaScript, которая обрабатывает события касания и реализует прокрутку импульса одним пальцем (что пользователи обычно ожидают в нативных приложениях) для элементов div.