Domyślne zachowanie WebKit / Blink (Safari / Chrome) w systemie MacOS od 10.7 (Mac OS X Lion) polega na ukrywaniu pasków przewijania przed użytkownikami gładzika, gdy nie są one używane. Może to być mylące ; pasek przewijania jest często jedyną wizualną wskazówką dotyczącą przewijania elementu.
Przykład ( jsfiddle )
HTML<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
Zrzut ekranu WebKit (Chrome)
Zrzut ekranu Presto (Opera)
Jak mogę wymusić, aby pasek przewijania był zawsze wyświetlany na przewijalnym elemencie w oprogramowaniu WebKit?
Odpowiedzi:
Wygląd pasków przewijania można kontrolować za pomocą
-webkit-scrollbar
pseudoelementów [ blog ] WebKit . Możesz wyłączyć domyślny wygląd i zachowanie, ustawiając-webkit-appearance
[ dokumenty ] nanone
.Ponieważ usuwasz styl domyślny, musisz również samodzielnie określić styl, w przeciwnym razie pasek przewijania nigdy się nie pojawi. Poniższy CSS odtwarza wygląd ukrytych pasków przewijania:
Przykład ( jsfiddle )
CSS Zrzut ekranu WebKit (Chrome)źródło
.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }
W przypadku jednostronicowej aplikacji internetowej, w której dynamicznie dodaję przewijalne sekcje, uruchamiam paski przewijania OSX, programowo przewijając jeden piksel w dół i tworząc kopię zapasową:
To powoduje zanikanie i zanikanie wskazówki wizualnej.
źródło
Oto krótszy fragment kodu, który ponownie włącza paski przewijania w całej witrynie. Nie jestem pewien, czy różni się znacznie od aktualnej najpopularniejszej odpowiedzi, ale oto jest:
Znalezione pod tym linkiem: http://simurai.com/blog/2011/07/26/webkit-scrollbar
źródło
Paski przewijania przeglądarki w ogóle nie działają na iPhonie / iPadzie. W pracy używamy niestandardowych pasków przewijania JavaScript, takich jak jScrollPane, aby zapewnić spójny interfejs użytkownika dla różnych przeglądarek: http://jscrollpane.kelvinluck.com/
U mnie działa to bardzo dobrze - możesz stworzyć naprawdę piękne niestandardowe paski przewijania, które pasują do projektu Twojej witryny.
źródło
Innym dobrym sposobem radzenia sobie z ukrytymi paskami przewijania Lion jest wyświetlenie monitu o przewinięcie w dół. Nie działa z małymi obszarami przewijania, takimi jak pola tekstowe, ale dobrze działa z dużymi obszarami przewijania i zachowuje ogólny styl witryny. Jedną z witryn, które to robią, jest http://versusio.com , po prostu sprawdź tę przykładową stronę i poczekaj 1,5 sekundy, aby zobaczyć monit:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
Implementacja nie jest trudna, ale musisz uważać, aby nie wyświetlać monitu, gdy użytkownik już przewinął.
Potrzebujesz jQuery + Underscore i
$(window).scroll
by sprawdzić, czy użytkownik sam przewinął,_.delay()
wyzwalać opóźnienie przed wyświetleniem monitu - monit nie powinien być natrętny$('#prompt_div').fadeIn('slow')
zaniknąć w swoim monicie i oczywiście$('#prompt_div').fadeOut('slow')
znikać, gdy użytkownik przewinął ekran po wyświetleniu monituPonadto możesz powiązać zdarzenia Google Analytics, aby śledzić zachowanie użytkownika podczas przewijania.
źródło