2014-05-06 25 views
6

Użycie elastycznego układu i dużej liczby stylów CSS do utworzenia strony internetowej, mam problem z ukrywaniem lub wyświetlaniem pasków przewijania i zmianą układu o 17 pikseli.Wykrywanie różnego rodzaju pasków przewijania (np. Normalny/ukryty osx)

Głównym problemem jest to, że na OSX paski przewijania unoszą się nad całym Układem bez wpływu na to, ale w dowolnej przeglądarce w systemie Windows pasek przewijania jest na przykład częścią układu, a zatem przesuwa go w lewo o szerokość 17 pikseli.

Próbując rozwiązać ten zacząłem wykryć przeglądarek takich jak:

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

Ale po przeczytaniu wielu postów na ten temat, zdałem sobie sprawę, że zamiast wykrywać przeglądarkę wiele osób poleca wykrywanie funkcji. Więc czy istnieje sposób, aby dowiedzieć się, jak przeglądarka obsługuje paski przewijania? Niezależnie od tego, czy będą częścią strony lub po prostu unoszą się nad wszystkim jak w safari.

Dzięki za pomoc!

+0

W zależności od wersji jQuery że używasz $ .browser() została zastąpiona wykrywania obiektów. Możesz zajrzeć do czegoś takiego jak http://modernizr.com/. –

+0

Zrobiłem, to jest rzeczywiście bardzo przydatne, jeśli chodzi o wykrywanie cech, ale informacje na temat pasków przewijania, których potrzebuję wydają się zbyt szczegółowe, przynajmniej nie mogłem znaleźć go w dokumentacji Modernizr. – ibanes88

Odpowiedz

1

Test hiddenscroll powinien być tym, czego szukasz w Modernizr. To nie jest w głównej bibliotece jeszcze, ale można zbudować niestandardową wersję beta v3 (która obejmuje ten test) pod adresem v3.modernizr.com

+0

wielkie dzięki! Wygląda interesująco, spróbuję tego! – ibanes88

5

Jest to łatwe do zmierzenia. Na przewijanej elementu, grubość przewijania jest prosta:

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

Jak explained very well David Walsh. Pasek przewijania szerokość/wysokość wynosi zero na:

  • OSX (chyba ustawienia myszy zostały zmodyfikowane lub przed Lion).

  • przeglądarki urządzeń dotykowych (Android, iOS, Windows Phone).

  • Krawędź IE12 w trybie tabletu (dynamicznie zmieniana, paski przewijania wyświetlają się i ukrywają, a odświeżanie strony następuje po zmianie trybu tabletu.) Sądzę, że zmiana jest możliwa do wykrycia poprzez rejestrację w celu zmiany rozmiaru i testowanie szerokości paska przewijania).

  • Może być zmieniony przez CSS, np. ::-webkit-scrollbar { width: 1em; } np. -ms-overflow-style: none (documentation).

  • Może być zerem, jeśli element nie jest jeszcze w dokumencie (może również, jeśli skrypt działa w <head>?).

Inne uwagi:

  • modernizr ma wykrywanie funkcji hiddenscrollbar który wykrywa czy używany przewijania zerowej szerokości.

  • Różnica wysokości również powinna to zmierzyć, ale nie była niezawodna w IE8 (szczególnie niewiarygodna po zmianie rozmiaru ze względu na zmianę powiększenia), więc zawsze stosowałem różnicę szerokości.

  • Jeśli szerokość jest różna od zera, może również ulec zmianie ze względu na: (1) zmiany powiększenia strony (szerokość pozostaje taka sama jak liczba pikseli w niektórych przeglądarkach, dlatego zmieniają się piksele logiczne.Mimo, że zoom przybliżania działa inaczej), (2) Zmiany stylu, takie jak -webkit-scrollbar, (3) Zmiany motywu na pulpicie (szerokości różnią się dla głównych tematów lub spersonalizowanych motywów).

Oto kilka linków do testerów:

+0

Edge nie uruchamia zdarzenia zmiany rozmiaru dla trybu tabletu, gdy jest zmaksymalizowane. – Timothy003

+0

Należy zauważyć, że ta metoda nie działa, jeśli element ma "obramowanie" –