Trình đơn mục bổ sung

Podcast CSS – 034: Overflow

Khi nội dung vượt quá thành phần mẹ, bạn có thể xử lý theo nhiều cách. Bạn có thể di chuyển để thêm không gian, cắt các cạnh tràn, cho biết phần bị cắt bằng dấu ba chấm, v.v. Tràn nội dung là một yếu tố đặc biệt quan trọng cần cân nhắc khi phát triển cho các ứng dụng điện thoại và nhiều kích thước màn hình.

Có 2 lựa chọn cắt khác nhau trong CSS; text-overflow sẽ giúp ích cho từng dòng văn bản và các thuộc tính overflow sẽ giúp kiểm soát nội dung tràn trong mô hình hộp.

Tràn dòng đơn với text-overflow

Sử dụng thuộc tính text-overflow trên mọi phần tử chứa(các) nút văn bản, chẳng hạn như một đoạn văn, <p>. Thuộc tính này chỉ định cách văn bản xuất hiện khi không vừa với không gian có sẵn của phần tử. Tất cả văn bản HTML có thể xem được trên một trang đều nằm trong các nút văn bản. Để sử dụng text-overflow, bạn cần một dòng văn bản đơn chưa được ngắt dòng, vì vậy, bạn cũng phải đặt overflow thành hidden và có giá trị white-space ngăn việc ngắt dòng.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Sử dụng các thuộc tính tràn

Bạn có thể đặt các thuộc tính tràn trên một phần tử để kiểm soát những gì xảy ra khi các phần tử con cần nhiều không gian hơn không gian mà phần tử đó có. Điều này có thể là có chủ ý, chẳng hạn như trong một bản đồ tương tác như Google Maps, nơi người dùng di chuyển xung quanh một hình ảnh lớn được cắt theo một kích thước cụ thể. Trường hợp này cũng có thể xảy ra ngoài ý muốn, chẳng hạn như trong một ứng dụng trò chuyện, người dùng nhập một tin nhắn dài không vừa với bong bóng văn bản.

Bạn có thể xem phần nội dung tràn theo hai phần. Phần tử mẹ có một không gian bị hạn chế chặt chẽ và sẽ không thay đổi. Bạn có thể coi đây là một cửa sổ. Các phần tử con là nội dung cần nhiều khoảng trống hơn so với phần tử mẹ. Bạn có thể coi đây là những gì bạn đang nhìn qua cửa sổ. Việc quản lý nội dung tràn sẽ giúp định hướng cách cửa sổ đóng khung nội dung này.

Di chuyển trên trục dọc và trục ngang

Thuộc tính overflow-y kiểm soát phần tràn thực tế dọc theo trục dọc của khung nhìn thiết bị, do đó, bạn có thể cuộn lên và xuống.

Thuộc tính overflow-x kiểm soát nội dung tràn dọc theo trục ngang của khung hiển thị thiết bị, do đó, nội dung sẽ cuộn sang trái và phải.

Thuộc tính logic cho hướng cuộn

Các thuộc tính overflow-inline và overflow-block đặt nội dung tràn dựa trên hướng tài liệu và chế độ viết.

Chế độ viết tắt overflow

Cú pháp viết tắt overflow đặt cả kiểu overflow-x và overflow-y trên một dòng:

overflow: hidden scroll;

Nếu bạn chỉ định hai từ khoá, thì từ khoá đầu tiên sẽ áp dụng cho overflow-x và từ khoá thứ hai sẽ áp dụng cho overflow-y. Nếu không, cả overflow-x và overflow-y đều sử dụng cùng một giá trị.

Giá trị

Hãy xem xét kỹ hơn các giá trị và từ khoá có sẵn cho các thuộc tính overflow.

overflow: visible (mặc định)

Nếu không đặt thuộc tính này, overflow: visible là giá trị mặc định cho web. Điều này đảm bảo rằng nội dung không bao giờ bị ẩn một cách vô tình và tuân theo các nguyên tắc cốt lõi là "không bao giờ ẩn nội dung" hoặc "bố cục an toàn của bố cục chính xác".

overflow: hidden

Với overflow: hidden, nội dung sẽ bị cắt theo hướng đã chỉ định và không có thanh cuộn nào được cung cấp để hiển thị nội dung đó.

overflow: scroll

overflow: scroll cho phép thanh cuộn để người dùng có thể cuộn qua nội dung. Ngay cả khi nội dung không tràn, thanh cuộn vẫn sẽ xuất hiện. Đây là một cách hiệu quả để giảm hiện tượng thay đổi bố cục trong tương lai nếu một vùng chứa có thể cuộn trong tương lai (chẳng hạn như dựa trên kích thước thay đổi) và chuẩn bị cho người dùng về các vùng có thể cuộn.

overflow: clip

Giống như overflow: hidden, nội dung có overflow: clip sẽ được cắt vào hộp khoảng đệm của phần tử. Điểm khác biệt giữa clip và hidden là từ khoá clip cũng cấm mọi thao tác cuộn, kể cả thao tác cuộn có lập trình.

overflow: auto

Cuối cùng, giá trị thường dùng nhất là overflow: auto. Điều này tôn trọng lựa chọn ưu tiên của người dùng và hiện các thanh cuộn nếu cần, nhưng ẩn chúng theo mặc định, đồng thời giao trách nhiệm cuộn cho người dùng và trình duyệt.

Thao tác cuộn và nội dung tràn

Nhiều hành vi overflow trong số này sẽ tạo ra một thanh cuộn, nhưng có một số hành vi và thuộc tính cuộn cụ thể có thể giúp bạn kiểm soát hoạt động cuộn trên vùng chứa tràn.

Thao tác di chuyển và khả năng hỗ trợ tiếp cận

Bạn cần đảm bảo rằng vùng có thể cuộn có thể chấp nhận tiêu điểm để người dùng bàn phím có thể nhấn phím Tab để chuyển đến hộp, sau đó dùng các phím mũi tên để cuộn.

Để cho phép một hộp có thể cuộn chấp nhận tiêu điểm, hãy thêm tabindex="0", một tên có thuộc tính aria-labelledby và một thuộc tính role thích hợp. Ví dụ:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Sau đó, bạn có thể dùng CSS để cho biết hộp có tiêu điểm, bằng cách sử dụng thuộc tính outline để đưa ra một dấu hiệu trực quan cho biết hộp đó hiện có thể cuộn.

Trong bài viết Sử dụng CSS để thực thi khả năng hỗ trợ tiếp cận, Adrian Roselli trình bày cách CSS có thể giúp ngăn chặn các lỗi về khả năng hỗ trợ tiếp cận. Ví dụ: chỉ bật tính năng cuộn và thêm chỉ báo tiêu điểm nếu bạn sử dụng đúng thuộc tính. Các quy tắc sau đây sẽ chỉ làm cho hộp có thể cuộn nếu hộp đó có thuộc tính tabindex, aria-labelledby và role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Vị trí thanh cuộn trong mô hình hộp

Thanh cuộn chiếm không gian trong hộp khoảng đệm và có thể cạnh tranh không gian nếu inline chứ không phải overlaid. Mô-đun mô hình hộp mở rộng hơn về nguồn tiềm năng này của sự thay đổi bố cục.

root-scroller so với implicit-scroller

Bạn có thể nhận thấy rằng một số thành phần cuộn có hành vi kéo để làm mới và các hành vi đặc biệt khác, đặc biệt là khi phát triển cho các ứng dụng di động và ứng dụng kết hợp. Hành vi cuộn này xảy ra trên trình cuộn gốc. Một trang chỉ có một trình cuộn gốc. Theo mặc định, documentElement là trình cuộn gốc của trang. Tuy nhiên, bằng cách thay đổi phần tử nào là trình cuộn gốc, các hành vi đặc biệt có thể được áp dụng cho các trình cuộn khác ngoài documentElement. Chúng ta gọi trình cuộn mới này là trình cuộn gốc ngầm.

Để tạo một trình cuộn gốc, bạn có thể sử dụng một thứ gọi là thúc đẩy trình cuộn bằng cách đặt một vùng chứa ở vị trí cố định, đảm bảo vùng chứa đó bao phủ toàn bộ khung hiển thị và có chỉ mục z ở trên cùng bằng một trình cuộn. Trải nghiệm một trình cuộn gốc so với một trình cuộn ngầm lồng ghép tại đây.

Tạo kiểu cho thanh cuộn

Bạn có thể tạo kiểu cho thanh cuộn để kết hợp thanh cuộn vào thiết kế của trang web. scrollbar-color đặt màu cho ngón tay cái và rãnh của thanh cuộn.

Để thay đổi chiều rộng của thanh cuộn, hãy sử dụng scrollbar-width. Bạn không thể đặt chiều dài tuỳ ý cho thuộc tính này, nhưng có thể chỉ định rằng bạn muốn một thanh cuộn thin hoặc none.

scroll-behavior

scroll-behavior cho phép bạn chọn sử dụng chế độ cuộn do trình duyệt kiểm soát đối với các phần tử. Bạn có thể chỉ định cách xử lý các thành phần điều hướng trong trang như .scrollTo() hoặc đường liên kết.

Điều này đặc biệt hữu ích khi dùng với prefers-reduced-motion để chỉ định hành vi cuộn dựa trên lựa chọn ưu tiên của người dùng.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Nếu bạn từng cuộn đến cuối một lớp phủ phương thức, sau đó tiếp tục cuộn và thấy trang phía sau lớp phủ di chuyển, thì đây là hiện tượng chuỗi cuộn hoặc truyền đến vùng chứa cuộn mẹ. Thuộc tính overscroll-behavior cho phép bạn ngăn hiện tượng tràn nội dung cuộn rò rỉ vào một vùng chứa mẹ (gọi là chuỗi cuộn).

cố định vị trí cuộn

Thao tác cuộn thường diễn ra mượt mà, cho phép bạn đặt nội dung trong scrollport ở bất cứ đâu bạn muốn. Đối với một số thiết kế, chẳng hạn như thư viện hình ảnh hoặc nội dung mô phỏng các trang hoặc trang trình bày, bạn có thể muốn nội dung khớp với scrollport.

Thiết lập vùng chứa cuộn

Để bật tính năng cuộn nhanh, hãy thêm scroll-snap-type vào vùng chứa có thể cuộn. Trước tiên, bạn sẽ xác định trục mà tính năng cuộn nhanh sẽ diễn ra. Đây có thể là một thuộc tính logic (block hoặc inline), một thuộc tính thực (x hoặc y) hoặc both.

Bạn cũng có thể xác định mức độ nghiêm ngặt của tính năng căn chỉnh khi cuộn. Độ nghiêm ngặt mặc định là proximity, tức là vùng chứa có thể cuộn sẽ cố gắng điều chỉnh nếu có thể. Bạn cũng có thể đặt độ nghiêm ngặt thành mandatory để đảm bảo vùng chứa cuộn sẽ luôn được căn chỉnh.

.scroll-container {
    scroll-snap-type: block mandatory;
}

Tính năng cuộn nhanh sẽ căn chỉnh một phần tử trong phạm vi đầy đủ của vùng chứa cuộn, nhưng điều gì sẽ xảy ra nếu một phần của vùng chứa cuộn không hiển thị? Ví dụ: bạn có thể có một tiêu đề cố định phủ lên một phần của vùng chứa có thể cuộn. Để giúp căn chỉnh các phần tử được gắn vào phần hiển thị của vùng chứa có thể cuộn, bạn có thể đặt scroll-padding.

Điều khiển các phần tử có thể di chuyển

Để làm cho một phần tử có thể di chuyển nhanh, hãy đặt thuộc tính scroll-snap-align thành start, end hoặc center. Nếu hướng của tính năng căn chỉnh khi cuộn là both, bạn có thể đặt 2 giá trị. Tham số này đặt xem một cạnh của phần tử sẽ căn chỉnh với cạnh của cổng cuộn hay được căn giữa.

Bạn có thể điều chỉnh khoảng cách xung quanh các cạnh của phần tử được căn chỉnh bằng scroll-margin:

scroll-margin cũng được dùng để đặt khoảng đệm khi cuộn đến một phần tử:

Để làm cho thao tác cuộn trở nên mượt mà hơn, bạn có thể thêm scroll-snap-stop: always vào một mục trong vùng chứa có thể cuộn. Điều này không ngăn bạn di chuyển qua nhiều mục trong một lần di chuyển. Nếu bạn kết thúc thao tác cuộn theo cách mà thao tác cuộn sẽ tiếp tục quán tính, thì thao tác cuộn sẽ kết thúc ở vị trí chụp nhanh tiếp theo thay vì tiếp tục vượt qua.

Kiểm tra mức độ hiểu biết của bạn

Tài nguyên

Overflow And Data Loss In CSS from Smashing Magazine