Mac OS X Lion, kaydırma çubukları, ve web sitesi kullanımı
Küçük bir alanda içerik (gibi uzun listeler, vb) görüntülemek için kullanın taştı divs var. Divs overflow: auto;
CSS kuralını vererek, her zaman bir cazibe gibi, kullanıcı kaydırma çubukları daha fazla içerik mevcut olduğuna işaret vermeye çalıştı.
Bu tür aktif kaydırma değilsen kaydırma çubuklarını gizler hangi Mac OS X Lion, pencereden dışarı atılır. Sen çok güçlü bir görsel ipuçları vardır çünkü sanırım benim bilgisayarda bir uygulama ile uğraşırken beğendimolabilirkaydırma daha fazla içerik görmek için. Web sayfası elemanları, çok daha net ve endişeleniyorum benim kullanıcıların olmayacak şeyler var daha fazla içerik kullanılabilir (durum noktası: StackOverflow "Soruları ile benzer başlıklar" girerken yeni bir soru iyi bir örnek bu).
Bu meşru bir endişe mi, yoksa Lion kullanıcıları eğer bir şeyler kesilmiş gibi görünüyorsa, kaydırma mevcut olabileceğini gösterir bilecek? Diyelim tarayıcılar lion'da eğer sayfada bir öğe ise kaydırma çubukları oluşturmak için zorlamak için herhangi bir geçici çözüm (ve sayfanın kendisi değil) var mı??
CEVAP
Bu katılmıyorum. Evet, UI/UX anlıyorum. Ancak bazı siteler, navigasyon için özellikle Yatay yaklaşım kullanıcıların navigasyon yatay gider bilmiyor olabilir bu. Bunu ancak zorlamak için bir düzeltme söz edilmiştir. Bu gayet iyi çalışıyor bulduk:
Open my code in Mac Safari Chrome etc (JS FIDDLE PREVIEW)
<style type="text/css">
#horiz_scroll::-webkit-scrollbar {
-webkit-appearance:none !important;
width:11px !important
}
#horiz_scroll::-webkit-scrollbar {
border-radius:8px !important;
border:2px solid white !important;
background-color:#ccc !important
}
#horiz_scroll::-webkit-scrollbar-thumb {
border-radius:8px !important;
border:2px solid white !important;
background-color:rgba(0,0,0,.5) !important
}
/*
// If you want it on hover //
#horiz_scroll::-webkit-scrollbar:active,
#horiz_scroll::-webkit-scrollbar:hover,
#horiz_scroll::-webkit-scrollbar:focus{border-radius:8px !important;border:2px solid white !important;background-color:#ccc !important}
*/
</style>
<div id="horiz_scroll" style="width:943px;height:480px;overflow:auto">
<!-- Just fit content inside this that scrolls horizontally. Example -->
<table id="Table_01" height="350" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="background:#eee;width:9000px;min-height:400px">hello</div>
</td>
</tr>
</table>
</div>
Kaydırma çubukları var hatta div'...
Sadece kaydırma çubukları uzun bir par...
Devre dışı bırakmak dikey ve yatay kay...
HTML öğesi kaydırma çubukları olup olm...
Nasıl OS için gizli olmaktan kaydırma ...