Làm một div theo chiều dọc cuộn sử dụng CSS

Question

này

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

đưa ra một div mà người dùng có thể di chuyển trong cả chiều ngang và chiều dọc. Làm cách nào để thay đổi nó để div là chỉ có thể cuộn theo chiều dọc?

Answer 1

Bạn đã bảo vệ nó ngoài việc sử dụng sai tài sản. Thanh cuộn có thể được kích hoạt với bất kỳ thuộc tính nào overflow, overflow-x hoặc overflow-y và mỗi thiết bị có thể được đặt thành bất kỳ visible, hidden, scroll, auto hoặc inherit. Bạn hiện đang xem hai điều sau:

• auto - Giá trị này sẽ xem chiều rộng và chiều cao của hộp. Nếu chúng được xác định, nó sẽ không cho phép hộp mở rộng qua các ranh giới đó. Thay vào đó (nếu nội dung vượt quá các ranh giới đó), nó sẽ tạo một thanh cuộn cho một trong hai ranh giới (hoặc cả hai) vượt quá chiều dài của nó.

• scroll - Giá trị này buộc thanh công cụ một thanh cuộn, bất kể nội dung nào, ngay cả khi nội dung không vượt quá giới hạn. Nếu nội dung không cần phải cuộn, thanh sẽ xuất hiện dưới dạng "bị tắt" hoặc không tương tác.

Nếu bạn luôn muốn thanh cuộn dọc để xuất hiện:

Bạn nên sử dụng overflow-y: scroll. lực lượng thanh cuộn này xuất hiện cho trục dọc dù có cần hay không. Nếu bạn không thể cuộn ngữ cảnh, nó sẽ xuất hiện dưới dạng thanh cuộn "bị tắt".

Nếu bạn chỉ muốn có một thanh cuộn để xuất hiện nếu bạn có thể di chuyển hộp:

Chỉ cần sử dụng overflow: auto. Vì nội dung của bạn theo mặc định chỉ vi phạm đến dòng tiếp theo khi nó không thể vừa với dòng hiện tại, thanh cuộn ngang sẽ không được tạo (trừ khi nó nằm trên một phần tử bị tắt gói). Đối với thanh dọc, nó sẽ cho phép nội dung mở rộng đến độ cao bạn đã chỉ định. Nếu nó vượt quá chiều cao đó, nó sẽ hiển thị thanh cuộn dọc để xem phần còn lại của nội dung, nhưng sẽ không hiển thị thanh cuộn nếu nó không vượt quá chiều cao.

Answer 2

Thử như thế này.

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

Answer 3

Sử dụng overflow-y: auto; trên div.

Ngoài ra, bạn cũng nên đặt chiều rộng.

Answer 4

Bạn có thể sử dụng mã này để thay thế.

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

overflow-x: Thuộc tính overflow-x xác định phải làm gì với các cạnh trái/phải của nội dung - nếu nó tràn khu vực nội dung của phần tử.
overflow-y: Thuộc tính tràn-y chỉ định phải làm gì với các cạnh trên cùng/dưới cùng của nội dung - nếu nó tràn khu vực nội dung của phần tử.

Giá trị
hiển thị: Giá trị mặc định. Nội dung không được cắt bớt và có thể được hiển thị bên ngoài hộp nội dung.
ẩn: Nội dung bị cắt bớt - và không có cơ chế cuộn nào được cung cấp.
cuộn: Nội dung được cắt bớt và cơ chế cuộn được cung cấp.
tự động: Nên làm cho cơ chế cuộn được cung cấp cho các hộp tràn.
ban đầu: Đặt thuộc tính này thành giá trị mặc định của nó.
kế thừa Thừa kế thuộc tính này từ phần tử gốc.

Answer 5

Vấn đề với tất cả các câu trả lời cho tôi là chúng không đáp ứng được. Tôi đã có một chiều cao cố định cho một div cha mẹ mà tôi không muốn. Tôi cũng không muốn dành nhiều thời gian để xem xét các truy vấn phương tiện. Nếu bạn đang sử dụng góc cạnh, bạn có thể sử dụng tập hợp thẻ bootstraps và nó sẽ làm tất cả công việc khó khăn cho bạn. Bạn sẽ có thể cuộn nội dung bên trong và nó sẽ được đáp ứng. Khi bạn thiết lập tab, hãy thực hiện như sau: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... vấn đề là bạn không muốn biểu tượng tiêu đề hoặc hình ảnh. sau đó ẩn các phác thảo của các tab trong cs như thế này: .nav-tabs { border-bottom:none; } và cũng này .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} và cuối cùng là để loại bỏ các tab vô hình mà bạn vẫn có thể click vào nếu bạn không thực hiện điều này: .nav > li > a {padding:0px;margin:0px;}

Answer 6

Đối với 100% sử dụng chiều cao khung nhìn :

overflow: auto; 
max-height: 100vh; 

Answer 7

Bạn có thể sử dụng overflow-y: scroll để cuộn dọc.

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