Cách tạo thanh cuộn (scroll) cho một phần tử HTML

– Thông thường, khi “nội dung” của phần tử có kích thước vượt quá phạm vi phần content của phần tử thì mặc định nội dung sẽ bị tràn ra ngoài, tùy vào kích thước của nó mà nó sẽ tràn tới vùng đệm, đường viền, hoặc tràn ra khỏi phần tử luôn, gây mất thẩm mỹ nghiêm trọng đối với trang web.

– Ví dụ như phần tử có đường viền màu xanh bên dưới, tấm hình nằm bên trong nó có chiều cao vượt quá kích thước của nó, cho nên tấm hình đã bị tràn ra bên ngoài.

Bạn đang xem: Cách tạo thanh cuộn (scroll) cho một phần tử HTML

– Tuy nhiên, với việc sử dụng thuộc tính overflow thì chúng ta có thể khắc phục được tình trạng phía trên, khi nội dung bị tràn ra ngoài thì chúng ta có thể tùy chỉnh ẩn phần nội dung bị tràn ra bên ngoài, hay là tạo các thanh cuộn cho phần tử, . . . .

1) Cách sử dụng thuộc tính overflow trong CSS

– Để sử dụng thuộc tính overflow thì chúng ta dùng cú pháp như sau:

overflow: value;

– Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:

visible

– Khi nội dung của phần tử có kích thước vượt quá phạm vi phần content của phần tử thì nội dung sẽ bị tràn ra ngoài.

Xem ví dụ hidden

– Khi nội dung của phần tử có kích thước vượt quá phạm vi phần content của phần tử thì nội dung sẽ bị tràn ra ngoài (nội dung có thể tràn tới vùng đệm, nhưng không thể tràn tới đường viền, bởi vì phần nội dung bị tràn tới đường viền hoặc tràn ra khỏi phần tử sẽ bị ẩn đi)

Xem ví dụ auto

– Khi nội dung của phần tử có kích thước vượt quá phạm vi phần content của phần tử thì phần tử sẽ tự động tạo ra các thanh scroll.

• Nếu chiều rộng của nội dung có kích thước vượt quá phạm vi chiều rộng của phần content thì phần tử sẽ tạo thanh scroll ngang.
• Nếu chiều cao của nội dung có kích thước vượt quá phạm vi chiều cao của phần content thì phần tử sẽ tạo thanh scroll dọc.

Xem ví dụ scroll

Xem thêm : Học lập trình có nên xài Macbook hay không?

– Phần tử luôn luôn tạo ra hai cái thanh scroll ngang & dọc (mặc cho nội dung của nó có kích thước vượt quá phạm vi phần content của nó hay không)

Xem ví dụ initial

– Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính overflow có giá trị là visible)

Xem ví dụ inherit

– Kế thừa giá trị thuộc tính overflow từ phần tử cha của nó.

Xem ví dụ

2) Cách sử dụng thuộc tính overflow-x và overflow-y trong CSS

– Khi chúng ta thiết lập thuộc tính overflow cho một phần tử thì mặc định “chiều ngang & chiều dọc của phần tử sẽ có chung một cách thức xử lý khi nội dung của nó vượt quá phạm vi phần content của nó”

– Để giải quyết vấn đề được đặt ra ở phía trên, khi nội dung của phần tử có kích thước vượt quá phạm vi phần content của phần tử, thay vì sử dụng thuộc tính overflow để xử lý phần nội dung tràn ra bên ngoài thì bây giờ chúng ta đổi lại dùng hai thuộc tính overflow-x và overflow-y.

– Thuộc tính overflow-x dùng để xử lý phần nội dung bị tràn ra bên ngoài (theo chiều ngang)

– Thuộc tính overflow-y dùng để xử lý phần nội dung bị tràn ra bên ngoài (theo chiều dọc)

– Để sử dụng thuộc tính overflow-x thì chúng ta dùng cú pháp như sau:

overflow-x: value;

– Trong đó, value có thể được xác định dựa theo một trong sáu loại giá trị:

visible

– Khi nội dung của phần tử có kích thước vượt quá phạm vi chiều rộng phần content của phần tử thì nội dung sẽ bị tràn ra ngoài.

hidden

– Khi nội dung của phần tử có kích thước vượt quá phạm vi chiều rộng phần content của phần tử thì nội dung sẽ tràn ra ngoài (nội dung có thể tràn tới vùng đệm, nhưng không thể tràn tới đường viền, bởi vì phần nội dung bị tràn tới đường viền hoặc tràn ra khỏi phần tử sẽ bị ẩn đi)

auto

– Khi nội dung của phần tử có kích thước vượt quá phạm vi chiều rộng phần content của phần tử thì phần tử sẽ tự động tạo ra thanh scroll ngang.

scroll

– Phần tử luôn luôn tạo ra một cái thanh scroll ngang (mặc cho nội dung của nó có kích thước vượt quá phạm vi chiều rộng phần content của nó hay không)

initial

– Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính overflow-x có giá trị là visible)

inherit

– Kế thừa giá trị thuộc tính overflow-x từ phần tử cha của nó.

– Lưu ý: Cách sử dụng thuộc tính overflow-y cũng giống với thuộc tính overflow-x. Tuy nhiên, thay vì xử lý phần nội dung bị tràn ra bên ngoài theo chiều ngang thì thuộc tính overflow-y sẽ xử lý phần nội dung bị tràn ra bên ngoài theo chiều dọc.

Nguồn: https://sigma.edu.vn
Danh mục: Công Nghệ