Gerekmiyorsa CSS kaydırma çubuğunu gizle

435

Gerekmiyorsa nasıl gizleyebileceğimi anlamaya çalışıyorum overflow-y:scroll;. Demek istediğim, bir web sitesi inşa ediyorum ve yazıların görüntüleneceği bir ana alanım var ve içerik geçerli genişliği aşmıyorsa kaydırma çubuğunu gizlemek istiyorum.

Ayrıca, ikinci sorum. Mesajlar mevcut genişliği aştığında, genişlik otomatik olarak artacak ve içerik kutunun dışına çıkmayacak şekilde yapmak istiyorum.

Bunu nasıl yapacağına dair bir fikri olan var mı?

Mesaj alanı:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Ana web sitesi konteyneri:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

html css

— Thanos Paravantis
kaynak

Dikey veya yatay kaydırma çubuğunu gizlemek istiyor musunuz? Eğer html kodu, örneğin birlikte örnek gönderebilir miyim jsfiddle.net ve burada bağlamak

— RJO

Merhaba, kullandığım 2 sınıfı yayınladım. Html'de, sınıf çağırmaktan başka bir şey yoktur.

— Thanos Paravantis

743

overflow-yÖzelliği olarak ayarlayın autoveya devralınmamışsa özelliği tamamen kaldırın.

— RJO
kaynak

Yapabilirdim ama ikinci soru ile ilgili genişlik ve otomatik artış konusunda yardıma ihtiyacım var.

— Thanos Paravantis

— İstifleme akışı

Örneklerinizde kaydırma nerede?

— Yeşil

13

Çözdüğüm overflow-y: autosorunu ayarlarken - bağlantı aslında bunun bir örneğini göstermiyor ...

— Gölge

2

overflow-x: autoYatay kaydırma çubuklarını gizlemek için de işe yaradığını unutmayın .

— Edward D'Souza

40

Kullanabilirsiniz overflow:auto;

Ayrıca x ve y eksenlerini overflow-xve overflow-yözellikleriyle ayrı ayrı kontrol edebilirsiniz .

Misal:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

— Ayyappan K
kaynak

20

Cevabınız için teşekkür etmemize rağmen, diğer cevapların üzerine ek değer katması daha iyi olurdu. Bu durumda, başka bir kullanıcı bu çözümü zaten gönderdiğinden cevabınız ek değer sağlamaz. Önceki bir yanıt size yardımcı olduysa, aynı bilgileri tekrarlamak yerine oy vermeniz gerekir.

— Toby Speight

9

Taşmak için hem .content hem de .container kullanabilirsiniz: auto. Metnin otomatik olarak aşılması anlamına gelir kaydırma x ekseni ve y ekseni gelir. (ayrı x ekseni ve y ekseni yaygın olarak taşma verir: otomatik)

.content {taşma: otomatik;}

— Ayyappan K
kaynak

5

.selected-elementClass{
    overflow-y:auto;
}

— Prateek Arora
kaynak

1

.container {overflow: auto;} işinizi görecektir. Belirli bir yönü kontrol etmek istiyorsanız, o eksen için otomatik ayarlamalısınız. AE

.container {taşma-y: otomatik;} .container {taşma-x: gizli;}

Yukarıdaki kod, x eksenindeki herhangi bir taşmayı gizleyecek ve gerektiğinde y ekseninde bir kaydırma çubuğu oluşturacaktır. Ancak, varsayılan yüksekliğin kap yüksekliğinden daha küçük olduğundan emin olmalısınız; değilse, kaydırma çubuğu gizlenmez.

— Neero
kaynak