2016-07-24 10 views
6

Kaydırılabilir bir div var. OS X'te, kaydırma çubukları kendilerini otomatik olarak gizler; bu, her zaman görünür kaydırma çubuklarından biraz daha güzel ancak bazen kullanıcılarımı karıştırır. Bu konuya genel tepki ::-webkit-scrollbar kullanmaktır:Windows kullanıcılarını etkilemeden kaydırma çubuklarının OS X'de gizlenmesi nasıl önlenir?

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/

bu çözümlerle sorun onlar da Windows'daki Chrome kullanıcıları etkileyecek olması ve İsterdim Chrome kullanıcılarının, Windows'da kullandıkları aynı kaydırma deneyimini yaşamalarını sağlamak.

Herhangi bir kaydırma çubuğu stilini değiştirmeden kaydırma çubuğunun OS X'de gizlenmesini engellemenin bir yolu var mı, yoksa CSS'ye bir şey eklemek mi?

Teşekkürler!

+0

Chrome kullanıcılarının kaydırma deneyimlerine sahip olmalarına izin vermek istediğinizden de, bunun OS X'de olmasına da izin vermenizi öneririz. Kullanıcılar ayrıca kaydırma işlemini de tercih ediyorlar g alıştıkları deneyim, yani bir şeyleri oldukları gibi bıraktıysanız onlara bir servis yapıyor olursunuz. Şaşırmış kullanıcılar kötü UX kararlarının bir işareti. Bununla birlikte, hala devam etmek ve kullanıcıların tercih edilen kullanıcı arayüzünü geçersiz kılmak için istekliyseniz, kullanıcı aracısının JavaScript ile koklama - "Mac" veya "Chrome" ya da kullanıcı aracısı dizesinde neyin bulunup bulunmadığını belirle ve CSS'yi buna göre uygula. Daha fazla bilgi edinmek isterseniz, detaylarla bir cevap gönderebilirim. – amn

cevap

0

bast kullanıcı deneyiminin Windows ve Mac'te aynı görünümü koruduğunu düşünüyorum.

HTML'iniz:

<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> 

Kişisel JS (all.js)

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

tüm Doc buraya bakınız Böyle NanoScroller olarak iki sistemde, o peltier yapmak için bir eklenti kullanabilir : https://jamesflorentino.github.io/nanoScrollerJS/

İlgili konular