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

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

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

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

ОТВЕТЫ

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

Ответ 2

Есть ли способы обхода, например, заставить браузеры, работающие на Lion, отображать полосы прокрутки, если это элемент на странице

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

Я просто имел дело с этой же проблемой. Вот исправление, которое я нашел. Это делает полосу прокрутки всегда отображаемой с 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);
}

Ответ 6

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

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

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