Mac OS X Lion, полосы прокрутки и удобство использования сайта

Question

У меня есть несколько переполненных div, которые я использую для отображения большого количества контента в небольшом пространстве (например, длинные списки и т. Д.). Предоставление div'ов CSS-правило overflow: auto; всегда работало как шарм, давая пользователю полосы прокрутки, чтобы указать, что доступно больше контента.

Это своего рода выбрасывается в окно с Mac OS X Lion, который (по умолчанию) скрывает полосы прокрутки, если вы не пользуетесь активной прокруткой. Мне нравится, когда вы имеете дело с приложением на моем компьютере, потому что я думаю, что есть очень сильные визуальные подсказки, которые вы можете прокручивать, чтобы увидеть больше контента. Для элементов веб-страницы это гораздо менее понятно, и я беспокоюсь, что мои пользователи не будут знать, что доступно больше контента (наглядный пример: «Вопросы с похожими заголовками» от StackOverflow при вводе нового вопроса - хороший пример этого ).

Это законная проблема, или пользователи Lion будут знать, что если что-то кажется обрезанным, это означает, что прокрутка может быть доступна? Есть ли какие-либо обходные пути, скажем, для принудительного запуска браузерами на Lion отображения полос прокрутки, если это элемент на странице (а не сама страница) ??

Answer 1

Я не согласен с этим. Да, я понимаю аргумент UI / UX. Однако некоторым сайтам, особенно горизонтальному подходу для навигации, это понадобится, поскольку пользователи могут не знать, что навигация идет горизонтально. Исправление, чтобы заставить это однако было упомянуто. Я нашел это работает отлично:

Открыть мой код в Mac Safari Chrome и т. Д. (JS FIDDLE PREVIEW)

<style type="text/css">
#horiz_scroll::-webkit-scrollbar {
-webkit-appearance:none !important;
width:11px !important
}
#horiz_scroll::-webkit-scrollbar {
border-radius:8px !important;
border:2px solid white !important;
background-color:#ccc !important
}
#horiz_scroll::-webkit-scrollbar-thumb {
border-radius:8px !important;
border:2px solid white !important;
background-color:rgba(0,0,0,.5) !important
}
/*
// If you want it on hover //
#horiz_scroll::-webkit-scrollbar:active,
#horiz_scroll::-webkit-scrollbar:hover, 
#horiz_scroll::-webkit-scrollbar:focus{border-radius:8px !important;border:2px solid white !important;background-color:#ccc !important}
*/
</style>

<div id="horiz_scroll" style="width:943px;height:480px;overflow:auto"> 
  <!-- Just fit content inside this that scrolls horizontally. Example -->
  <table id="Table_01" height="350" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <div style="background:#eee;width:9000px;min-height:400px">hello</div>
      </td>
    </tr>        
  </table>
</div>

Answer 2

Существуют ли какие-либо обходные пути, скажем, для того, чтобы браузеры, работающие на Lion, отображали полосы прокрутки, если это элемент на странице

Это атака.Пусть система позаботится об этом.Если пользователь использует Lion, это потому, что ему это нравится.И если они используют его и ему не нравятся новые полосы прокрутки, они просто изменят это в Системных настройках.

Answer 3

Я ПРОСТО занялся этой же проблемой.Вот исправление, которое я нашел.Это делает полосу прокрутки всегда появляется с Safari на Mac Air и iPad, с которыми я тестировал.Конечно, это только тогда, когда есть больше контента, который можно увидеть.Не когда весь контент отображается.

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

Answer 4

OS X Lion действительно только форсирует проблему. Пользователи мобильных браузеров (как iOS, так и Andriod) ссорились об этом целую вечность ... уловка переполнения не работает вообще; вам нужно больше думать о дизайне страницы или выйти за рамки стандартного поведения браузера и добавить поддержку JavaScript для сенсорного экрана и прокрутки (например, jqTouch).

К сожалению, поведение полосы прокрутки Lion влияет не только на веб-сайты. Например, это делает мои сессии vnc на машинах с большими настройками дисплея довольно раздражающими (приходится изменять размер окна vnc, чтобы убедить Лайона показать мне полосу прокрутки).

К сожалению, решение состоит в том, чтобы перейти к «Предпочтения> Общие> Показать полосы прокрутки:» и установить «всегда». Вид отменяет любой поступательный импульс, который Apple, возможно, пытался создать с Lion. Но возможность использовать эту чертову штуку - козырь общего назначения.

Answer 5

Не будучи пользователем Mac, я не буду философски обсуждать, должен ли Лев скрывать полосы прокрутки.

Что касается того, чтобы полосы прокрутки появлялись в элементах веб-страницы, просто настройте CSS overflow: scroll. Это позволяет всегда отображать вертикальные и горизонтальные полосы прокрутки, и это довольно очевидно, когда им нечего прокручивать.

Если вы хотите, чтобы он прокручивался только по вертикали или горизонтали, и чтобы не отображалась полоса прокрутки другого измерения, вы можете использовать overflow-y: scroll или overflow-x: scroll соответственно вместо overflow: scroll. Это работает во всех современных браузерах, но не в IE8 и менее.

Answer 6

Lion сам позаботится об этом, мигая полосами прокрутки на любом прокручиваемом элементе на мгновение, когда он появляется, давая пользователю начальный намек на то, что есть еще что прокрутить.Конечно, пользователь может или не может заметить это.Если пользователь привык к действиям Lion, ваш сайт не будет единственным местом, где это происходит, и пользователь, вероятно, знает, как с этим справиться.Если ваш бокс выглядит «не прокручиваемым» без полос прокрутки, вы можете более четко указать, что они можно прокручивать, например, имея четкую границу вокруг рамки с некоторым обрезанным содержимым внутри.Это может быть чем-то, что вы захотите сделать независимо от Lion.

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

Возможно, вы захотите перенести это на https://ux.stackexchange.com/ для некоторых реальных экспертных мнений.