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

Ответ 1

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

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

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}) код с таймером должен будет reset свойство CSS нормализовать по истечении требуемого времени (пусть говорят 5 секунд)

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

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

Ответ 2

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

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

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

Ответ 3

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

Живая демонстрация

код:

$(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});
  });

Ответ 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)

Ответ 5

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

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

здесь образец того, что вы получите -

Ответ 6

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

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

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

Ответ 7

до тех пор, пока ios5 не сможет прокручивать внутренние divs, так что вы, вероятно, не видите полосу прокрутки при прокрутке, потому что ее нет.

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

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