Div'ı CSS kullanarak dikey olarak kaydırılabilir yapma

Bu

<div id="" style="overflow:scroll; height:400px;">

Bir veren divkullanıcı yatay ve dikey hem de kaydırma yapabilirsiniz. Div'nin yalnızca dikey olarak kaydırılabilmesi için nasıl değiştirebilirim ?

Yanlış mülk kullanmak dışında bir kenara sahip. Kaydırma çubuğu herhangi özelliğiyle tetiklenebilir overflow, overflow-xya overflow-yve her birine ayarlanabilir visible, hidden, scroll, auto, veya inherit. Şu anda bu ikisine bakıyorsunuz:

• auto- Bu değer kutunun genişliğine ve yüksekliğine bakacaktır. Tanımlanırlarsa, kutunun bu sınırları aşmasına izin vermez. Bunun yerine (içerik bu sınırları aşarsa), sınır (veya her ikisi) için uzunluğunu aşan bir kaydırma çubuğu oluşturur.

• scroll- Bu değerler , içerik sınır kümesini aşmasa bile, ne olursa olsun bir kaydırma çubuğunu zorlar . İçeriğin kaydırılması gerekmiyorsa, çubuk "devre dışı" veya etkileşimli olmayan olarak görünür.

Her zaman dikey kaydırma çubuğunun görünmesini istiyorsanız:

Kullanmalısınız overflow-y: scroll. Bu , gerekip gerekmediğine bakılmaksızın dikey eksen için bir kaydırma çubuğunu görünmeye zorlar . İçeriği gerçekten kaydıramıyorsanız, "devre dışı" kaydırma çubuğu olarak görünür.

Kaydırma çubuğunun yalnızca kutuyu kaydırabiliyorsanız görünmesini istiyorsanız:

Sadece kullan overflow: auto. İçeriğiniz varsayılan olarak geçerli satıra sığmayacağı zaman bir sonraki satıra ayrıldığından, yatay kaydırma çubuğu oluşturulmaz (kelime kaydırma özelliği devre dışı bırakılmış bir öğede değilse). Dikey çubuk için, içeriğin belirttiğiniz yüksekliğe kadar genişlemesine izin verir. Bu yüksekliği aşarsa, içeriğin geri kalanını görüntülemek için dikey bir kaydırma çubuğu gösterir, ancak yüksekliği aşmazsa bir kaydırma çubuğu göstermez.

Böyle dene.

<div style="overflow-y: scroll; height:400px;">

% 100 görüntü yüksekliği yüksekliği için:

overflow: auto;
max-height: 100vh;

overflow-y: auto;Div üzerinde kullanın .

Ayrıca, genişliği de ayarlamanız gerekir.

Bunun yerine bu kodu kullanabilirsiniz.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x : overflow-x özelliği, içeriğin sol / sağ kenarlarıyla ne yapılacağını belirtir - öğenin içerik alanından taşarsa.
overflow-y : overflow-y özelliği, içeriğin üst / alt kenarlarıyla ne yapılacağını belirtir - öğenin içerik alanından taşarsa. Görünür

değerler : Varsayılan değer. İçerik kırpılmaz ve içerik kutusunun dışında görüntülenebilir. hidden : İçerik kırpılır ve kaydırma mekanizması sağlanmaz. scroll : İçerik kırpılır ve kaydırma mekanizması sağlanır. auto : Taşan kutular için kaydırma mekanizmasının sağlanmasına neden olmalıdır. initial : Bu özelliği varsayılan değerine ayarlar.





inherit Bu özelliği üst öğesinden devralır .

overflow-y: scrollDikey kaydırma için kullanabilirsiniz .

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>

Benim için tüm bu cevapların sorunu yanıt vermiyor olmalarıydı. İstemediğim bir üst div için sabit bir yüksekliğe sahip olmalıydım. Ayrıca, medya sorgularıyla dolaşmak için tonlarca zaman harcamak istemedim. Açısal kullanıyorsanız, bootstraps sekmesini kullanabilirsiniz ve tüm zor işleri sizin için yapacaktır. İç içeriği kaydırabileceksiniz ve yanıt verebileceksiniz. Sekmeyi ayarladığınızda, şu şekilde yapın: $scope.tab = { title: '', url: '', theclass: '', ative: true };... önemli olan, bir başlık veya resim simgesi istemezsiniz. sonra sekmenin anahattını şu şekilde cs'de gizleyin:

.nav-tabs {
   border-bottom:none; 
} 

ve ayrıca bu .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} ve son olarak, bunu uygulamazsanız yine de tıklayabileceğiniz görünmez sekmeyi kaldırmak için:.nav > li > a {padding:0px;margin:0px;}