Предотвращение скрытия полос прокрутки для пользователей трекпада MacOS в WebKit / Blink

162

Поведение WebKit / Blink (Safari / Chrome) по умолчанию в MacOS начиная с 10.7 (Mac OS X Lion) заключается в том, чтобы скрывать полосы прокрутки от пользователей трекпада, когда они не используются. Это может сбивать с толку ; полоса прокрутки часто является единственной визуальной подсказкой, что элемент можно прокручивать.

Пример ( jsfiddle )

HTML

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

CSS

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}

Скриншот WebKit (Chrome)

скриншот div без видимой полосы прокрутки

Скриншот Presto (Opera)

скриншот div с видимой полосой прокрутки

Как заставить полосу прокрутки всегда отображаться на прокручиваемом элементе в WebKit?

css macos webkit scrollbar blink Джереми Бэнкс
источник

Вы пробовали переполнение: прокрутка? Это раньше работало в Chrome. Это должно заставить полосы прокрутки всегда отображать.

xaddict

2

Обратите внимание, что это также проблема в Firefox на Mac OS X.

Блейз

Чувак, я ненавижу, когда сайты портят пользовательский интерфейс в моей системе и агент пользователя.

атп

250

Появление полос прокрутки можно управлять с помощью WebKit в -webkit-scrollbarпсевдо-элементах ^{[ блог ]} . Вы можете отключить внешний вид и поведение по умолчанию, установив для -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)

снимок экрана, показывающий полосу прокрутки webkit, без необходимости наведения

Джереми Бэнкс
источник

1

Для принудительных полос прокрутки Macosx Lion описанный здесь прием не работает с этой техникой: stackoverflow.com/a/3417992/62255 . Не беспокойтесь - поскольку мы явно устанавливаем размеры здесь, мы можем получить к ним доступ напрямую.

jedierikb

5

Обратите внимание, что вы также можете настроить трек / фон полосы прокрутки с помощью:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }

XML

Обратите внимание, стили прокрутки webkit не работают в iOS 7 (и, возможно, 6).

RobW

4

Стоит упомянуть, что в моем тестировании и в самом старом комментарии кого-то другого кажется, что у вас не может быть постоянно включенной полосы прокрутки И импульсной прокрутки, к которой привыкли люди с iOS. Выполнение CSS с прокруткой импульса привело к исчезновению моих пользовательских полос прокрутки.

JMQ

2

Я не проверял это в последнее время, но я нашел это примечание в нашем CSS, которое ссылается на это решение: «Обратите внимание, что здесь будут отображаться полосы прокрутки в стиле OS X, например, в Chrome на Windows».

Henrik N

19

Для одностраничного веб-приложения, в котором я динамически добавляю прокручиваемые разделы, я запускаю полосы прокрутки OSX, программно прокручивая один пиксель вниз и обратно:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

Это вызывает появление и исчезновение визуального сигнала.

Блез
источник

19

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

::-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

Алекс Банман
источник

3

Полосы прокрутки браузера вообще не работают на iPhone / iPad. На работе мы используем пользовательские полосы прокрутки JavaScript, такие как jScrollPane, для обеспечения согласованного кросс-браузерного интерфейса: http://jscrollpane.kelvinluck.com/

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

Крис М. Валлийский
источник

2

Другим хорошим способом работы со скрытыми полосами прокрутки Lion является отображение подсказки для прокрутки вниз. Он не работает с небольшими областями прокрутки, такими как текстовые поля, но хорошо работает с большими областями прокрутки и сохраняет общий стиль сайта. Один сайт, который делает это, - http://versusio.com , просто проверьте страницу этого примера и подождите 1,5 секунды, чтобы увидеть подсказку:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

Реализация не сложна, но вы должны позаботиться о том, чтобы вы не отображали подсказку, когда пользователь уже прокрутил.

Вам нужен JQuery + Подчеркнуть и

$(window).scroll чтобы проверить, прокручивал ли пользователь сам,

_.delay() вызвать задержку перед отображением подсказки - подсказка не должна быть навязчивой

$('#prompt_div').fadeIn('slow') исчезать в вашей подсказке и, конечно,

$('#prompt_div').fadeOut('slow') исчезать, когда пользователь прокручивал после того, как увидел подсказку

Кроме того, вы можете связать события Google Analytics, чтобы отслеживать поведение пользователя при прокрутке.

user976647
источник

Предотвращение скрытия полос прокрутки для пользователей трекпада MacOS в WebKit / Blink

Пример ( jsfiddle )

Ответы:

Пример ( jsfiddle )