Обнаружение различных полос прокрутки (например, нормальный/скрытый 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) Изменения темы рабочего стола (ширина отличается от основных тем или персонализированных тем).

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

Простой простой код JavaScript (возможно, лучше сделать div постоянным, чтобы избежать вычислений).
Modernizr cow test, который AFAIK дает hiddenscrollbar как true, если ширина полосы прокрутки равна нулю (также см. cssscrollbar).
Некоторый уродливый код jQuery

Ответ 1

Ответ 2