CSS - Taşma: Kaydırma; - Daima dikey kaydırma çubuğunu göster?

225

Şu anda var:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

Ancak, bazı kullanıcılar için daha fazla içerik olduğu açıktır. Div'imin aslında çok daha fazla içerik içerdiğini bilmeden sayfayı aşağı kaydırabilirler. 510px yüksekliğini kullanıyorum, böylece bazı sayfaları kesiyor, böylece bazı sayfalarda daha fazla içerik var gibi görünüyor, ancak bu hepsi için çalışmıyor.

Mac kullanıyorum ve Chrome ve Safari'de dikey kaydırma çubuğu yalnızca fare Div'in üzerindeyken ve aktif olarak kaydırma yaptığınızda gösterilir. Her zaman görüntülemesinin bir yolu var mı?

— Jambo
kaynak

4

Uhm, bu davranışı jsfiddle'da yeniden yaratabilir misiniz ? Sağladığınız css, her zaman bir kaydırma çubuğunu göstermeye zorlamalıdır.

— sg3s

1

Evet, buna neden olacak başka CSS tuhaflıkları var gibi görünüyor, bu her zaman kaydırma çubuğunu görüntülemelidir. Div'in bunu sarmaladığından emin olun.

— Shawn Steward

Ben Lion koşuyorum! Belki de budur? Sanal bir makine

— açacağım

1

Lanet olsun, benim hatam! Lion'daki bir özelliktir. Satın almadan önce ne aldığımı gerçekten okumalıyım ... Teşekkürler çocuklar!

— Jambo

386

Sadece kendim bu problemle karşılaştı. OSx Lion, kullanımda değilken daha "kaygan" görünmesini sağlamak için kaydırma çubuklarını gizler, ancak aynı zamanda ele aldığınız sorun ortaya çıkar: insanlar bazen div'in kaydırma özelliği olup olmadığını göremezler.

Düzeltme: CSS'nizde -

::-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);
}

Kod snippet'ini göster

/* always show scrollbars */

::-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);
}


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

Snippet'i genişlet

görünüşü gerektiği gibi özelleştirin. Kaynak

— NoviceCoding
kaynak

6

Bu, Safari ile iPad'de de çalışmalı mı? İOS 6.1.3 çalıştıran bir iPad 2'deyim ve çalışmıyor.

— crmpicco

6

Bunu sadece belirli bir sınıf için geçerli kılmanın bir yolu var mı?

— futbolpal

2

Sadece kapta 'taşma: otomatik' ayarladıktan sonra benim için çalıştı (benim durumumda bir <ul>). Teşekkürler!

— Rob Campion

8

@futbolpal evet, bu bir sınıfta çalışıyor gibi görünüyor; deneyin .classname :: - webkit-scrollbar

— Chase

4

bunu yatay olarak nasıl çalıştırabilirim? çubuk dikey kaydırma için

— görünür

14

İPad Safari'de lütfen not edin, NoviceCoding'in çözümü CSS'nizin bir webkit-overflow-scrolling: touch;yerinde varsa çalışmaz . Çözüm ya NoviceCoding çözümünün tüm olaylarını ortadan kaldırmak -webkit-overflow-scrolling: touch;ya -webkit-overflow-scrolling: auto;da koymaktır.

— Razan Paul
kaynak

3

Css - webkit-overflow-scrolling: touch ve scrollbars cihazlarımızda yer almak mümkün müdür?

— Julsy

1

Bu, testlerimden iOS 7.1.x'te Safari'de iPad ile çalışacak, ancak iOS 6'dan emin değilim. Ancak, Firefox'ta çalışmaz. JScrollPane adı verilen çapraz tarayıcı uyumlu olmayı amaçlayan bir jQuery eklentisi var .

Ayrıca, Stack Overflow'da başka ayrıntılara sahip yinelenen bir yayın var .

— JStarcher
kaynak

5

Bu sorunun 2 yıl önce, iOS6'dan önce sorulduğunu unutmayın.

— OGHaza

webkit yalnızca safari kromudur. Firefox'a özgü motoru hedeflemeniz gerekecek

— TigerBear

-4

Bu, pencerelerde erişim için kaydırılması gereken içerik olduğunda kaydırma çubuklarının her zaman görüntülenmesini sağlar, tüm pencereler ve Mac'teki tüm uygulamalar için geçerlidir:

 Apple menüsünden Sistem Tercihlerini Başlat "Genel" ayarlar panelini tıklayın "Kaydırma çubuklarını göster" i bulun ve "Her Zaman" ın yanındaki radyo kutusunu seçin Tamamlandığında Sistem Tercihleri'nden çıkın

— Michelle
kaynak

18

Bu soruya bir çeşit cevap veriyor, ancak sunucu tarafını düzeltmek yerine bir istemci tarafı düzeltmesi. Bu, web sayfası kullanıcısının yapması gereken bir şeydir, stackoverflow bir programlama sitesidir, bu nedenle insanlar genellikle tarayıcı ayarlarını değiştirmenin bir yolu yerine kod çözümünü bulmak için buraya gelirler.

— Eric Leschinski