WebKit / Blink'te MacOS izleme dörtgeni kullanıcıları için kaydırma çubuklarının gizlenmesini önleme

162

WebKit / Blink'in (Safari / Chrome) 10.7'den beri MacOS'taki varsayılan davranışı (Mac OS X Lion), kullanılmadığında kaydırma çubuğu kullanıcılarından kaydırma çubuklarını gizlemektir. Bu kafa karıştırıcı olabilir ; kaydırma çubuğu genellikle bir öğenin kaydırılabilir olduğu tek görsel işarettir.

Örnek ( 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;
}

WebKit (Chrome) Ekran Görüntüsü

görünür kaydırma çubuğu olmayan bir div ekran görüntüsü

Önizleme Oyun Presto (Opera)

görünür kaydırma çubuğuna sahip bir div ekran görüntüsü

WebKit'te kaydırılabilir bir öğede her zaman bir kaydırma çubuğunun gösterilmesini nasıl zorlayabilirim?

— Jeremy Banks
kaynak

Taşmayı denediniz mi? Bu, Chrome'da çalışırdı. Kaydırma çubuklarını her zaman görüntülenmeye zorlamalıdır.

— xaddict

2

Bunun Mac OS X'teki Firefox'ta da bir sorun olduğunu unutmayın.

— Blaise

Adam, üzerinde UI ile web siteleri karmaşa hate my sistem ve kullanıcı aracısı.

— amn

250

Kaydırma çubuklarının görünümü WebKit'in -webkit-scrollbarsözde öğeleri ^{[ blog ]} ile kontrol edilebilir . Sen ayarlayarak varsayılan görünümünü ve davranışını devre dışı bırakabilirsiniz -webkit-appearance ^{[ dokümanlar ]} için none.

Varsayılan stili kaldırdığınız için, stili kendiniz de belirtmeniz gerekir; aksi takdirde kaydırma çubuğu hiçbir zaman görünmez. Aşağıdaki CSS, gizleme kaydırma çubuklarının görünümünü yeniden oluşturur:

Örnek ( jsfiddle )

CSS

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

WebKit (Chrome) Ekran Görüntüsü

asılı kalmaya gerek kalmadan webkit'in kaydırma çubuğunu gösteren ekran görüntüsü

— Jeremy Banks
kaynak

1

Zorunlu macosx aslan kaydırma çubukları için, burada açıklanan hile bu teknikle çalışmaz: stackoverflow.com/a/3417992/62255 . Rahatsızlık yok - boyutları açıkça burada ayarladığımız için doğrudan onlara erişebiliriz.

— jedierikb

5

Kaydırma çubuğunun parçasını / arka planını aşağıdakilerle de özelleştirebileceğinizi unutmayın:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }

— XML

Webkit kaydırma çubuğu stillerinin iOS 7'de (ve muhtemelen 6) çalışmadığını unutmayın.

— Rob

4

Bahsetmemiz gereken bir şey, testlerimde ve başkası tarafından gerçekten eski bir yorumda, her zaman açık bir kaydırma çubuğuna ve insanların iOS ile alışkın olduğu momentum benzeri kaydırmaya sahip olamayacağınız gibi görünüyor. Momentum kaydırma CSS yapmak özel kaydırma çubuklarımın kaybolmasına neden oldu.

— jmq

2

Son zamanlarda bunu doğrulamamıştım, ancak bu çözümü referans alan CSS'mizde bu notu buldum: "Bunun, Windows işletim sistemindeki Chrome'da OS X stili kaydırma çubuklarını göstereceğini unutmayın."

— Henrik N

19

Kaydırılabilir bölümleri dinamik olarak eklediğim tek sayfalık bir web uygulaması için, OSX'in kaydırma çubuklarını programlı olarak bir pikseli aşağı ve yukarı kaydırarak tetiklerim:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

Bu, görsel işaretin içeri ve dışarı kaymasını tetikler.

— Blaise
kaynak

19

Web sitenizin tamamında kaydırma çubuklarını yeniden etkinleştiren daha kısa bir kod parçası. Mevcut en popüler cevaptan çok farklı olup olmadığından emin değilim ama işte burada:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Bu bağlantıda bulundu: http://simurai.com/blog/2011/07/26/webkit-scrollbar

— Alex Banman
kaynak

3

Tarayıcı kaydırma çubukları iPhone / iPad'de hiç çalışmıyor. İş yerinde, tutarlı bir tarayıcılar arası kullanıcı arayüzü sağlamak için jScrollPane gibi özel JavaScript kaydırma çubukları kullanıyoruz: http://jscrollpane.kelvinluck.com/

Benim için çok iyi çalışıyor - sitenizin tasarımına uyan gerçekten güzel özel kaydırma çubukları yapabilirsiniz.

— Chris M. Galce
kaynak

2

Lion'un gizli kaydırma çubuklarıyla baş etmenin bir başka iyi yolu, aşağı kaydırma istemi görüntülemektir. Metin alanları gibi küçük kaydırma alanlarıyla çalışmaz, ancak geniş kaydırma alanlarıyla iyi çalışır ve sitenin genel stilini korur. Bunu yapan bir site http://versusio.com'dur , sadece bu örnek sayfayı kontrol edin ve istemi görmek için 1,5 saniye bekleyin:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

Uygulama zor değil, ancak kullanıcı daha önce kaydırma yaptığında istemi görüntülememenize dikkat etmelisiniz.

JQuery + Alt Çizgi'ye ihtiyacınız var ve

$(window).scroll kullanıcının zaten kendi kendine kaydırma yapıp yapmadığını kontrol etmek için,

_.delay() istemini göstermeden önce bir gecikmeyi tetiklemek için - bilgi istemi rahatsız edici olmamalıdır

$('#prompt_div').fadeIn('slow') derhal ve elbette solmaya

$('#prompt_div').fadeOut('slow') istemi gördükten sonra kullanıcı kaydırıldığında solmaya

Ayrıca, kullanıcının kaydırma davranışını izlemek için Google Analytics etkinliklerini bağlayabilirsiniz.

— user976647
kaynak