Обнаружение различных полос прокрутки (например, нормальный/скрытый osx)

Используя отзывчивый макет и много CSS для создания веб-страницы, у меня возникает проблема с скрытыми или показанными полосами прокрутки и изменением макета на 17 пикселей.

Основная проблема заключается в том, что на OSX полосы прокрутки накладываются на весь макет, не затрагивая его, но в любом браузере в Windows, например, полоса прокрутки является частью макета и поэтому перемещает ее влево по ширине 17 пикселей.

Пытаясь решить эту проблему, я начал обнаруживать браузеры вроде:

if($.browser.chrome) {
   // adapt layout by 17px
} else if ($.browser.mozilla) {
   // adapt layout by 17px
}  else if ($.browser.safari) {
   // dont adapt layout by 17px
}

Но после прочтения большого количества сообщений по этой теме я понял, что вместо обнаружения браузера многие люди рекомендуют обнаружение функций. Итак, есть ли способ узнать, как браузер обрабатывает полосы прокрутки? Будут ли они участвовать в pagelayout или они просто будут нависнуть над всем, как на сафари?

Спасибо за вашу помощь!

Ответы

Ответ 1

Это легко измерить. На прокручиваемом элементе толщина полосы прокрутки проста:

var scrollbarWidth = scrollableEl.offsetWidth - scrollableEl.clientWidth;`

Как объяснил очень хорошо Дэвид Уолш. Ширина/высота полосы прокрутки равна нулю:

  • OSX (если только настройки мыши не были изменены, или перед Lion).

  • сенсорные устройства браузеров (Android, iOS, Windows Phone).

  • IE12 Edge в режиме планшета (динамически изменчивый, полосы прокрутки показывают и скрывают и перерисовывают страницы при изменении режима Tablet. Я думаю, что это изменение можно обнаружить, зарегистрировавшись для события изменения размера и проверки ширины полосы прокрутки).

  • Может быть изменен с помощью CSS, например. ::-webkit-scrollbar { width: 1em; } -ms-overflow-style: none (документация).

  • Может быть ноль, если элемент еще не в документе (возможно, если script работает в <head>?).

Другие примечания:

  • У Modernizr есть обнаружение функции hiddenscrollbar, которая определяет, используются ли полосы прокрутки нулевой ширины.

  • Разница в высоте должна также измерять это, но она не была надежной в IE8 (особенно ненадежной после события изменения размера из-за изменения масштаба), поэтому я всегда использовал разницу в ширине.

  • Если ширина не равна нулю, она также может меняться из-за: (1) изменения масштаба страницы (ширина остается такой же, как и физические пиксели на некоторых браузерах, поэтому логические пиксели меняются. Несмотря на то, что пинч-зум действует по-разному), (2) Изменения стиля, такие как -webkit-scrollbar, (3) Изменения темы рабочего стола (ширина отличается от основных тем или персонализированных тем).

Вот несколько ссылок на тестеры:

Ответ 2

Тест hiddenscroll должен быть тем, что вы ищете в Modernizr. Его еще нет в основной библиотеке, но вы можете создать пользовательскую версию бета-версии v3 (включая этот тест) в v3.modernizr.com