Div'deki kaydırma çubuğunu yalnızca gerektiğinde nasıl görünür hale getiririm?

151

Bu div var:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

Metin taşmasa bile kaydırma çubukları her zaman görülebilir. Kaydırma çubuklarını yalnızca gerektiğinde görünür hale getirmek istiyorum - yani, yalnızca gerekli kutuda yeterli metin olduğunda görünür. Bir metin alanının yaptığı gibi. Bunu nasıl yaparım? Yoksa bir textarea tarzı benim tek seçenek div gibi görünecek mi?

css html scrollbar

— Benubird
kaynak

Peki buna ne dersin. Üzerine geldiğinde yalnızca kaydırma çubuğunu gösterir. Bunun sizin için yararlı olup olmadığından emin değilim. stackoverflow.com/questions/7125185/…

— Ryan Beaulieu

codepen.io/anon/pen/QwLeMG Umarım bu size yardımcı olabilir

— vishalkin

overflow: auto;Android'de çalışmıyor :-(

— aioobe

313

Kullanın overflow: auto. Kaydırma çubukları yalnızca gerektiğinde görünür.

(Sidenote, yalnızca x veya y kaydırma çubuğu için belirtebilirsiniz: overflow-x: autove overflow-y: auto).

— hidde
kaynak

5

Taşma-y değerinin yalnızca belirttiğinizde işe yaradığını unutmayınmax-height

— Siyah

1

overflow-y maksimum yüksekliğe ihtiyaç duymaz. Taşma-y ile asla maksimum yükseklik kullanmadım ve her zaman çalıştı.

— Sumafu

1

@Sumafu, şu an deneyimleyebileceğim için, duruma göre buna ihtiyacınız olabilir.

— David

1

Taşma öğesini kullanıyorsanız veya konumlandırıyorsanız, öğenin sayfa veya görünüm alanı sınırlarına göre yeniden boyutlandırılmasını engellediğinden heightveya max-heightayarlamanız gerekir . absolutefixed

— Scott Schupbach

15

bunu dene:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

— kleinohad
kaynak

7

Deneyin

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

— pbaris
kaynak

6

Deneyin

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">

— GrvTyagi
kaynak

0

Metin olduğunda ya da olmadığında hala div'ın yüksekliğinin olduğunu gördüm. Böylece bunu en iyi sonuçlar için kullanabilirsiniz.

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>

— Shailendra Kumar
kaynak

0

Aşağıdakilerden birini deneyebilirsiniz:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>

— Papun Sahoo
kaynak