Khi website xuất hiện thanh trượt ngang, có thể gây ra một số khó chịu cho người dùng về trải nghiệm duyệt web, khó đọc nội dung, mất thẩm mỹ cho website, giảm sự tương tác của người dùng đối với website từ đó làm giảm thời gian trên trang của người dùng, bị google đánh giá không tương thích với thiết bị di động nên sẽ giảm điểm SEO,… do đó với lỗi này bạn nên xử lý sớm.
Để khắc phục lỗi website bị hiển thị thanh trượt ngang, trước hết bạn nên kiểm tra kỹ mã nguồn của trang, xác định nguyên nhân cụ thể, sau đó điều chỉnh CSS hoặc HTML để nội dung vừa khung nhìn mà không cần thanh trượt ngang.
Nguyên nhân
Website bị hiển thị thanh trượt ngang do các nguyên nhân sau:
- Phần tử vượt quá kích thước khung nhìn: Một số phần tử trên trang có kích thước cố định hoặc chiều rộng quá lớn, vượt quá kích thước của khung nhìn (viewport). Điều này thường xảy ra khi sử dụng thuộc tính CSS như width, margin, hoặc padding không phù hợp.
- Thiết kế không đáp ứng (responsive): Website chưa được thiết kế để tự động điều chỉnh kích thước và bố cục dựa trên kích thước của màn hình thiết bị. Điều này có thể làm xuất hiện thanh trượt ngang khi người dùng truy cập bằng thiết bị di động hoặc màn hình nhỏ.
- Nội dung hoặc hình ảnh quá lớn: Hình ảnh hoặc nội dung văn bản không được thu nhỏ theo kích thước khung nhìn, dẫn đến việc nội dung bị tràn ra ngoài.
- Sử dụng thuộc tính CSS không đúng cách: Các thuộc tính CSS như overflow không được thiết lập đúng hoặc có giá trị overflow: auto hoặc overflow: scroll, dẫn đến việc xuất hiện thanh trượt ngang.
- Lỗi liên quan đến khung bố cục (layout): Một số lỗi phổ biến trong CSS Flexbox hoặc CSS Grid có thể gây ra hiện tượng này, ví dụ như sử dụng min-width không phù hợp.
- Sử dụng các thẻ HTML không hợp lệ: Một số thẻ HTML có thể không được đóng đúng cách hoặc cấu trúc HTML bị sai.
Cách khắc phục
Với các nguyên nhân như trên thì bạn có thể sử dụng Devtools của Chrome để xác định xem phần tử nào đang bị “tràn” ra ngoài và làm xuất hiện thanh trượt ngang từ đó có thể CSS lại cho phần tử đó để khắc phục lỗi.
Sau khi đã khác định được phần tử bị tràn ra bạn có thể dùng các CSS sau:
/* Đảm bảo tất cả các phần tử không vượt quá chiều rộng khung nhìn */
* {
max-width: 100%;
box-sizing: border-box; /* Bao gồm cả padding và border trong kích thước phần tử */
}Sử dụng CSS Flexbox hoặc Grid.
Nếu bạn đang sử dụng layout cố định, hãy chuyển sang sử dụng Flexbox hoặc Grid để thiết kế trang web thân thiện và đáp ứng tốt hơn:
.container {
display: flex; /* Hoặc sử dụng display: grid; */
flex-wrap: wrap; /* Cho phép các phần tử con xuống hàng nếu không đủ không gian */
}Đặt thuộc tính Width cho ảnh và Video
Hình ảnh và video có thể làm trang web xuất hiện thanh trượt ngang nếu không được đặt kích thước đúng. Sử dụng CSS để điều chỉnh:
img, video {
max-width: 100%;
height: auto; /* Đảm bảo tỷ lệ khung hình được giữ nguyên */
}Hoặc với cách nhanh hơn để xử lý tất cả các phần tử bị vượt quá khung chiều rộng làm xuất hiện thanh trượt ngang (Thò ra là cắt) bằng đoạn code dưới đây:
body {
overflow-x: hidden; /* Ẩn thanh trượt ngang trên toàn bộ trang */
}Cách này sẽ ẩn thanh trượt ngang nhưng đây không phải là cách xử lý tận gốc vấn đề gây nên thanh trượt ngang, cách này cũng sẽ làm cắt mất nội dung của phần tử bị tràn ra.
