Tạo thanh scroll ngang sử dụng thuộc tính overflow-x trong css

06/04/2020 241 lượt xem

Đôi khi bạn gặp trường hợp mà phải hiển thị một lượng nội dung lớn hơn nhiều phần không gian được cấp phát cho nó. Chương này sẽ trình bày cách xử lý vấn đề này.

CSS cung cấp thuộc tính overflow để nói cho trình duyệt điều gì cần phải làm nếu nội dung hiển thị của một hộp lớn hơn nhiều phần không gian đã cấp cho hộp đó. Thuộc tính này có thể nhận một trong các giá trị sau:

Giá trị Miêu tả
visible Cho phép nội dung có thể tràn qua các đường viền của phần tử chứa nó
hidden Phần nội dung sẽ bị cắt tại cạnh đường viền và sẽ không có thanh cuốn (scrollbar) nào được hiển thị
scroll Kích cỡ của phần tử chứa không thay đổi, nhưng hiển thị (hay thêm vào) các thanh cuốn (scrollbar) để cho phép người dùng thực hiện thao tác scroll để xem hết phần nội dung
auto Tương tự như giá trị scroll, nhưng thanh cuốn (scrollbar) sẽ chỉ được hiển thị nếu kích cỡ của nội dung lớn hơn không gian hộp hiển thị và bị tràn

Ví dụ sau minh họa cách sử dụng thuộc tính overflow và các giá trị của thuộc tính này trong CSS.

Kết quả là:

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận

Dự án đã hoàn thiện
Mẫu website bán hàng bàn thao tác công nghiệp
Mẫu website giới thiệu dịch vụ nha khoa
Web tin tức 02 giống web eva
Bài viết theo chủ đề

Chủ đề: Code theme wordpress

Hướng dẫn tạo theme WordPress phần 1
Hướng dẫn tạo theme WordPress phần 2

Xem hết loạt bài chủ đề này

Bài viết mới nhất
Hướng dẫn sử dụng plugin W3 Total Cache tăng tốc WordPress
JavaScript là gì?
HTML là gì?
Tạo thanh scroll ngang sử dụng thuộc tính overflow-x trong css
Kích hoạt thanh toán PayPal cho VNĐ trên WooCommerce