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

Используя адаптивный макет и много 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
}

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

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

Источник

2 ответа

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

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

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

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

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

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

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

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

Другие заметки:

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

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

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

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

Источник

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

Источник
Другие вопросы по тегам