Tworzenie div pionowego przewijania za pomocą CSS

To

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

daje divużytkownikowi możliwość przewijania zarówno w poziomie, jak i w pionie. Jak to zmienić, aby div mógł być przewijany tylko w pionie?

Masz to ubezpieczone oprócz korzystania z niewłaściwej właściwości. Pasek przewijania może być wyzwolony z wszelkich nieruchomości overflow, overflow-xalbo overflow-yi każdy z nich może być ustawiony jeden z visible, hidden, scroll, auto, lub inherit. Obecnie patrzysz na te dwa:

• auto- Ta wartość będzie patrzeć na szerokość i wysokość pudełka. Jeśli są zdefiniowane, nie pozwoli, aby pole przekroczyło te granice. Zamiast tego (jeśli treść przekracza te granice), utworzy pasek przewijania dla dowolnej granicy (lub obu), która przekracza jej długość.

• scroll- Te wartości wymuszają pasek przewijania, bez względu na wszystko, nawet jeśli zawartość nie przekracza zestawu granic. Jeśli zawartość nie musi być przewijana, pasek pojawi się jako „wyłączony” lub nieinteraktywny.

Jeśli zawsze chcesz, aby pionowy pasek przewijania pojawiał się:

Powinieneś użyć overflow-y: scroll. Te siły pasek przewijania do pojawiają się na osi pionowej, czy nie jest to potrzebne. Jeśli nie możesz przewinąć kontekstu, pojawi się on jako „wyłączony” pasek przewijania.

Jeśli chcesz, aby pasek przewijania pojawiał się tylko wtedy, gdy możesz przewinąć pole:

Po prostu użyj overflow: auto. Ponieważ treść domyślnie po prostu przechodzi do następnego wiersza, gdy nie może zmieścić się w bieżącym wierszu, poziomy pasek przewijania nie zostanie utworzony (chyba że dotyczy elementu z wyłączonym zawijaniem słów). W przypadku paska pionowego zawartość będzie się rozszerzać do określonej wysokości. Jeśli przekroczy tę wysokość, wyświetli pionowy pasek przewijania, aby wyświetlić resztę zawartości, ale nie wyświetli paska przewijania, jeśli nie przekroczy wysokości.

Spróbuj tak

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

Dla 100% wysokości rzutni użyj:

overflow: auto;
max-height: 100vh;

Użyj overflow-y: auto;na div.

Powinieneś także ustawić szerokość.

Zamiast tego możesz użyć tego kodu.

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

overflow-x : Właściwość overflow-x określa, co zrobić z lewą / prawą krawędzią treści - jeśli przepełni obszar zawartości elementu.
overflow-y : Właściwość overflow-y określa, co zrobić z górną / dolną krawędzią treści - jeśli przepełni obszar zawartości elementu. Widoczne

wartości : wartość domyślna. Treść nie jest przycinana i może być renderowana poza polem zawartości. ukryty : treść jest obcięta - i nie ma mechanizmu przewijania. przewijanie : treść jest obcinana i zapewniony jest mechanizm przewijania. auto : Powoduje udostępnienie mechanizmu przewijania dla przepełnionych pól. initial : Ustawia tę właściwość na wartość domyślną.





inherit Dziedziczy tę właściwość po elemencie nadrzędnym.

Możesz użyć overflow-y: scrolldo przewijania w pionie.

<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>

Problem z tymi wszystkimi odpowiedziami był taki, że nie reagowały. Musiałem mieć ustaloną wysokość dla rodzica div, czego nie chciałem. Nie chciałem też spędzać dużo czasu, grzebiąc w mediach. Jeśli używasz kątowego, możesz użyć zestawu startowego, który wykona za ciebie całą ciężką pracę. Będziesz mógł przewijać zawartość wewnętrzną, a ona będzie reagować. Po skonfigurowaniu karty wykonaj następujące czynności: $scope.tab = { title: '', url: '', theclass: '', ative: true };... chodzi o to, że nie chcesz ikony tytułu ani obrazu. następnie ukryj kontur karty w cs w następujący sposób:

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

a także to .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} i wreszcie, aby usunąć niewidoczną kartę, którą możesz kliknąć, jeśli nie zaimplementujesz tego:.nav > li > a {padding:0px;margin:0px;}