SORU
25 Temmuz 2011, PAZARTESİ


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
14 ŞUBAT 2012, Salı


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>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • fufko

    fufko

    27 ŞUBAT 2006
  • kimberly p

    kimberly p

    23 Ocak 2010
  • TheXiaxue

    TheXiaxue

    3 AĞUSTOS 2009