Sửa lỗi scroll với fixed header bằng CSS
Giải quyết issue với fixed header và scroll đến một element bằng hashtag
Khi sử dụng hashtag #
cho attribute href
, trình duyệt sẽ scroll tới element có id tương ứng section-two
. Đây là một tính năng từ thời trình duyệt mới ra đời.
<a href="#section-two">Section Two</a>
Nhưng một khi chúng ta thêm một element với position: fixed
, như header, vị trí scroll đến sẽ ko còn đúng nữa, nó vẫn scroll tới element đó, nhưng giờ nó có thể bị che bởi element đang set fixed.
Có rất nhiều cách để giải quyết vấn đề này trước đây, như thêm vào một đoạn padding vào element, hoặc dùng một đoạn javascript để handle, có tất cả 5 cách để giải quyết con issue này.
Giờ đây chúng ta có cách hoàn toàn mới chỉ với css
Sử dụng 2 thuộc tính mới là scroll-padding
và scroll-margin
body {
scroll-padding-top: 70px;
/* giá trị chiều cao của header */
}
Hiện tại cái này chỉ chạy tốt trên trình duyệt dùng Chromiu
TopDev via Vuilaptrinh
- Đ Điểm tên TOP 5 công nghệ mới đang HOT trong năm 2023
- 1 10 tính năng trên Apache Spark anh em nên biết
- G GRPC là gì? Điều gì giúp GRPC trở nên mạnh mẽ?
- W WebAssembly – Tương lai của các ứng dụng Web
- N Những ngôn ngữ lập trình phổ biến nhất hiện nay
- C Các nhóm ngành công nghệ thông tin, liệu có phù hợp với bạn?
- M Mô hình ngôn ngữ LaMDA – Công nghệ đứng sau chatbot AI Bard của Google
- D DRM là gì? DRM hoạt động như thế nào?
- N NFT tiềm năng hay “bong bóng công nghệ”?
- L Low Code là gì? Hướng đi nào cho Low Code 2023