Предотrotation скрытия полос прокрутки для пользователей трекпада MacOS в WebKit / Blink
Поведение WebKit / Blink (Safari / Chrome) по умолчанию в MacOS с 10.7 (Mac OS X Lion) заключается в том, чтобы скрывать полосы прокрутки от пользователей трекпада, когда они не используются. Это может ввести в заблуждение ; полоса прокрутки часто является единственным визуальным сигналом, что элемент прокручивается.
Пример ( jsfiddle )
HTML
Foo
Bar
Baz
Help I'm trapped in an HTML factory! CSS
- Поведение видеоввода HTML5 на iPhone и iPod в веб-приложениях Safari
- Можно ли всегда показывать стрелки вверх / вниз для ввода «числа»?
- Webkit CSS для управления полем вокруг цвета во вводе ?
- Пользовательская панель прокрутки CSS для Firefox
- CSS Что такое -moz- и -webkit-?
.frame { overflow-y: auto; border: 1px solid black; height: 3em; width: 10em; line-height: 1em; }
Скриншот WebKit (Chrome)
Скриншот Presto (Opera)
Как заставить строку прокрутки всегда отображаться на прокручиваемом элементе в WebKit?
- Свойство CSS3 webkit-overflow-scrolling: touch ERROR
- Как удалить выделение границы в текстовом элементе ввода
- CSS Радиус frameworks не обрезает изображение на Webkit
- CSS «набросает» поведение разных поведений на Webkit & Gecko
- Видимость видимости Webkit не работает
- CSS3 Непрерывная анимация вращения (точно так же, как загрузка солнечных часов)
- Проблемы с WebKit с event.layerX и event.layerY
- Добавление пользовательских заголовков в запросы ресурсов WebView - андроид
Появление полос прокрутки можно контролировать с помощью -webkit-scrollbar [ blog ] . Вы можете отключить внешний вид и поведение по умолчанию, установив -webkit-appearance [ docs ] на none .
Поскольку вы удаляете стиль по умолчанию, вам также необходимо указать стиль самостоятельно, или полоса прокрутки никогда не появится. Следующий CSS воссоздает появление скрытых полос прокрутки:
Пример ( jsfiddle )
CSS
.frame::-webkit-scrollbar { -webkit-appearance: none; } .frame::-webkit-scrollbar:vertical { width: 11px; } .frame::-webkit-scrollbar:horizontal { height: 11px; } .frame::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid white; /* should match background, can't be transparent */ background-color: rgba(0, 0, 0, .5); } .frame::-webkit-scrollbar-track { background-color: #fff; border-radius: 8px; }
Скриншот WebKit (Chrome)
Для одностраничного веб-приложения, где я динамически добавляю прокручиваемые разделы, я запускаю полосы прокрутки OSX, программно прокручивая один пиксель вниз и создавая резервную копию:
// Plain JS: var el = document.getElementById('scrollable-section'); el.scrollTop = 1; el.scrollTop = 0; // jQuery: $('#scrollable-section').scrollTop(1).scrollTop(0);
Это приводит к тому, что визуальный сигнал исчезает и исчезает.
Вот более короткий бит кода, который повторяет полосы прокрутки на всем вашем веб-сайте. Я не уверен, сильно ли он отличается от текущего наиболее популярного ответа, но вот он:
::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); }
Найдено по этой ссылке: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Браузерные полосы прокрутки вообще не работают на iPhone / iPad. На работе мы используем специальные полосы прокрутки JavaScript, такие как jScrollPane, чтобы обеспечить согласованный интерфейс между браузерами: http://jscrollpane.kelvinluck.com/
Он работает очень хорошо для меня – вы можете создавать действительно красивые пользовательские полосы прокрутки, которые соответствуют дизайну вашего сайта.
Еще один хороший способ борьбы со скрытыми полосами прокрутки Lion – отобразить подсказку для прокрутки вниз. Он не работает с небольшими областями прокрутки, такими как текстовые поля, но хорошо с большими областями прокрутки и сохраняет общий стиль сайта. Один сайт делает это http://versusio.com , просто проверьте эту страницу примера и подождите 1,5 секунды, чтобы увидеть приглашение:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
Реализация не является сложной задачей, но вам нужно позаботиться о том, чтобы вы не отображали приглашение, когда пользователь уже прокручивал.
Вам нужно jQuery + Underscore и
$(window).scroll чтобы проверить, $(window).scroll ли пользователь сам,
_.delay() чтобы вызвать задержку перед отображением приглашения – приглашение не должно быть навязчивым
$('#prompt_div').fadeIn('slow') исчезает в вашем приглашении и, конечно же,
$('#prompt_div').fadeOut('slow') исчезает, когда пользователь прокручивается после того, как увидел приглашение
Кроме того, вы можете связать события Google Analytics, чтобы отслеживать поведение прокрутки пользователя.