Một trong những điều cơ bản làm cho một trang web đẹp và dễ nhìn với người dùng, đó là không xuất hiện thanh cuộn ngang (horizontal scrollbar) trong tổng thể body. Tuy nhiên, vô tình chúng ta đôi lúc khiến cho một section hay một element nào đó trong layout có width rộng hơn body. Vì vậy, trang web của chúng ta xuất hiện thanh cuộn ngang. Để phát hiện được thành phần nào gây ra thanh cuộn ngang ấy, đơn giản hay phức tạp cũng tùy vào code nữa. Vì vậy, mình xin giới thiệu với bạn một cách nhanh nhất có thể mà mình phát hiện được nguyên nhân gây ra thanh cuộn ngang.
Mình có một trang web đang bị thanh cuộn ngang như trong hình, và mình đang tìm xem thành phần nào đã gây ra thanh cuộn ngang
Bạn hãy thêm đoạn CSS này vào file CSS
* {
box-sizing: border-box;
background: rgb(0 100 0 / 0.1) !important; //Màu có thể thay đổi tùy ý
}Trang web của bạn sẽ được đánh dấu như trong hình
Bạn hãy cuộn ngang hết chiều rộng của body và kiểm tra xem element nào chiếm hết chiều rộng ấy. Đó chính là thủ phạm làm xuất hiện thanh cuộn ngang trong trang web của bạn.
Ở trong ví dụ này, nguyên nhân chính là do thẻ chứa chữ “About” có chiều rộng vượt quá body. Mình chỉ cần sửa CSS của thẻ đó là xong.
Kiến thức này mình không tự nghĩ ra, do mình tìm được từ một Youtuber chuyên về FE. Mình sẽ để credit ở dưới để mọi người có thể xem.
Chúc mọi người code vui và thật nhiều sức khỏe ^^