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