2016-07-24 9 views
6

Mam przewijany div. W OS X paski przewijania są automatycznie ukrywane, co jest nieco ładniejsze niż zawsze widoczne paski przewijania, ale czasami myli użytkowników. Ogólny odpowiedzią na ten problem jest użycie ::-webkit-scrollbar:Jak zapobiec ukrywaniu pasków przewijania w systemie OS X bez wpływu na użytkowników systemu Windows?

How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

CSS - Overflow: Scroll; - Always show vertical scroll bar?

http://blog.0100.tv/2012/11/webkit-scrollbars-on-os-x/

Kłopot z tych rozwiązań jest to, że one również wpływ na użytkowników Chrome w systemach Windows, i chciałbym aby użytkownicy Chrome w systemie Windows mieli takie samo przewijanie, do jakiego są przyzwyczajeni.

Czy istnieje sposób, aby uniemożliwić ukrycie paska przewijania w systemie OS X bez zmiany stylu paska przewijania lub dodać coś do mojego arkusza CSS, aby miało to wpływ tylko na użytkowników komputerów Mac?

Dzięki!

+0

Wygląda na to, że użytkownicy Chrome mają przewijane ekrany, ale radzę też pozostawić go w systemie OS X. Użytkownicy preferują także przewijanie doznania, do których są przyzwyczajeni, więc robiłbyś im usługę, gdybyś pozostawił rzeczy takimi, jakie są. Zaskoczeni użytkownicy są oznaką złych decyzji UX. Mimo to, jeśli nadal chcesz przejść do nadpisania preferowanego interfejsu użytkownika, spróbuj użyć agenta użytkownika wykrywającego język JavaScript - szukającego "Maca" lub "Chrome" lub czegoś podobnego w łańcuchu agenta użytkownika - i odpowiednio zastosuj CSS. Jeśli chcesz wiedzieć więcej, mogę opublikować odpowiedź ze szczegółami. – amn

Odpowiedz

0

Uważam, że bast user experience ma taki sam wygląd w systemach Windows i Mac. Można użyć wtyczki, aby pettier w obu systemach, takich jak NanoScroller:

Twój HTML:

<head> 
    <link rel="stylesheet" href="nanoscroller.css"> 
</head> 
<body> 
    <!-- Your Element --> 
    <div id="about" class="nano"> 
     <div class="nano-content"> 
      <!-- Your content --> 
     </div> 
    </div> 
    <script src="jquery.js"></script> 
    <script src="nanoscroller.js"></script> 
    <script src="all.js"></script> 
</body> 

Twoje JS (all.js)

$(function(){ 
    // binding nanoScroller. 
    $('.nano').nanoScroller({ alwaysVisible: true }); 
}) 

Zobacz całą Doc tutaj : https://jamesflorentino.github.io/nanoScrollerJS/

Powiązane problemy