Cách tạo: Hiệu ứng cuộn lại

Học cách tạo phần cuộn lại.

Hiệu ứng cuộn

Nhấp vào nút để chuyển đổi giữa hiển thị và ẩn nội dung cuộn.

Nội dung có thể cuộn. Nhấp vào nút để chuyển đổi giữa hiển thị và ẩn nội dung có thể cuộn. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Thử ngay

Tạo hiệu ứng phần có thể cuộn

Bước 1 - Thêm HTML:

<button type="button" class="collapsible">Mở Cuộn</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Bước 2 - Thêm CSS:

Đặt kiểu phong cách accordion:

/* Đặt kiểu cho nút mở và đóng nội dung có thể cuộn */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Khi nút được nhấp và khi bạn di chuột đến nút (đang đợi), thêm màu nền cho nút (thêm .active class bằng JS) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Đặt kiểu cho nội dung có thể cuộn. Lưu ý: Mặc định ẩn */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Bước 3 - Thêm JavaScript:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Thử ngay

hiệu ứng cuộn lại có animation (thu gọn xuống dưới)

hiệu ứng cuộn lại có animation (thu gọn xuống dưới) để tạo hiệu ứng cuộn lại có animation, hãy thêmmax-height: 0、 overflow: hide max-height và

thì, sử dụng JavaScript để thêm thuộc tính tính toán vào lớp bảng điều khiển bằng cách thiết lập过渡: max-height thu gọn nội dung xuống dưới, tùy thuộc vào chiều cao của bảng điều khiển trên các kích thước màn hình khác nhau:

thực例

<style>
.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

Thử ngay

thêm biểu tượng

thêm một ký hiệu vào mỗi nút để chỉ ra nội dung có thể cuộn lại là mở hay đóng:

thực例

.collapsible:after {
  content: '\02795'; /* 表示“加号”（+）的 Unicode 字符 */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* 表示“减号”（-）的 Unicode 字符 */
}

Thử ngay