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 iOS 18 có gì mới? Có nên cập nhật iOS 18 cho iPhone của bạn?
- G Gamma AI là gì? Cách tạo slide chuyên nghiệp chỉ trong vài phút
- P Power BI là gì? Vì sao doanh nghiệp nên sử dụng PBI?
- K KICC HCMC x TOPDEV – Bước đệm nâng tầm sự nghiệp cho nhân tài IT Việt Nam
- T Trello là gì? Cách sử dụng Trello để quản lý công việc
- T TOP 10 SỰ KIỆN CÔNG NGHỆ THƯỜNG NIÊN KHÔNG NÊN BỎ LỠ
- T Tìm hiểu Laptop AI – So sánh Laptop AI với Laptop thường
- M MySQL vs MS SQL Server: Phân biệt hai RDBMS phổ biến nhất
- S SearchGPT là gì? Công cụ tìm kiếm mới có thể đánh bại Google?
- C Cách tích hợp ChatGPT vào Google Search siêu dễ