Scroll-margin-block-start: Khoảng Cách Cuộn Đầu Trang CSS Hoàn Hảo

Bạn muốn website của mình có trải nghiệm cuộn trang mượt mà và chuyên nghiệp hơn? Hãy cùng khám phá thuộc tính scroll-margin-block-start trong CSS.

Giới thiệu về scroll-margin-block-start

Thuộc tính scroll-margin-block-start trong CSS xác định khoảng cách giữa cạnh trên của một phần tử và cạnh trên của vùng chứa cuộn khi phần tử đó là mục tiêu cuộn đầu tiên trong khối. Điều này giúp cải thiện trải nghiệm người dùng bằng cách đảm bảo rằng nội dung không bị che khuất bởi thanh điều hướng cố định hoặc các phần tử khác ở đầu trang. Khi một phần tử trở thành mục tiêu cuộn do liên kết neo hoặc sử dụng scrollTo() , trình duyệt sẽ cuộn trang đến vị trí phần tử. scroll-margin-block-start thêm khoảng trống ở phía trên phần tử đó.

Ví dụ, nếu bạn có một thanh điều hướng cố định ở đầu trang, bạn có thể sử dụng scroll-margin-block-start để ngăn nội dung bị che khuất bên dưới thanh điều hướng khi người dùng nhấp vào một liên kết neo. Tìm hiểu thêm về CSS tại CSS .

Cú pháp của scroll-margin-block-start

Cú pháp của thuộc tính scroll-margin-block-start rất đơn giản. Nó chấp nhận một giá trị độ dài (ví dụ: px , em , rem ) hoặc từ khóa auto .

scroll-margin-block-start: 10px; scroll-margin-block-start: 2em; scroll-margin-block-start: auto;

Các giá trị có thể có

• <length> : Chỉ định khoảng cách bằng một đơn vị độ dài tuyệt đối hoặc tương đối (ví dụ: 10px , 2em , 1rem ).
• auto : Giá trị mặc định. Khoảng cách cuộn được xác định bởi trình duyệt.

Ví dụ minh họa scroll-margin-block-start

Hãy xem xét một ví dụ đơn giản. Chúng ta có một thanh điều hướng cố định cao 60px và một vài tiêu đề trong trang. Chúng ta muốn đảm bảo rằng khi người dùng nhấp vào một liên kết neo đến một tiêu đề, tiêu đề đó không bị che khuất bởi thanh điều hướng.

Đoạn mã HTML:

<nav style="position: fixed; top: 0; width: 100%; height: 60px; background-color: #eee;"> <a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> </nav> <div style="margin-top: 70px;"></div> <h2 id="section1" style="scroll-margin-block-start: 60px;">Section 1</h2> <p>Nội dung của section 1.</p> <h2 id="section2" style="scroll-margin-block-start: 60px;">Section 2</h2> <p>Nội dung của section 2.</p>

Trong ví dụ này, chúng ta đặt scroll-margin-block-start thành 60px cho cả hai tiêu đề. Điều này đảm bảo rằng khi người dùng nhấp vào liên kết neo, các tiêu đề sẽ được hiển thị ngay bên dưới thanh điều hướng, không bị che khuất. Điều quan trọng là scroll margin block start trong CSS là một công cụ mạnh mẽ để kiểm soát cách các phần tử tương tác với hành vi cuộn.

Khi nào nên sử dụng scroll-margin-block-start?

Bạn nên sử dụng scroll-margin-block-start khi:

• Bạn có một thanh điều hướng cố định hoặc các phần tử khác ở đầu trang có thể che khuất nội dung khi cuộn đến một vị trí cụ thể.
• Bạn muốn cải thiện trải nghiệm người dùng bằng cách đảm bảo rằng nội dung luôn được hiển thị rõ ràng khi cuộn đến một vị trí cụ thể.
• Bạn đang sử dụng các liên kết neo để điều hướng trong trang.

So sánh với scroll-padding-block-start

Cần lưu ý sự khác biệt giữa scroll-margin-block-start và scroll-padding-block-start . scroll-margin-block-start thêm khoảng trống bên ngoài phần tử, trong khi scroll-padding-block-start thêm khoảng trống bên trong phần tử. Nói cách khác, scroll-margin-block-start ảnh hưởng đến khoảng cách giữa phần tử và vùng chứa cuộn, trong khi scroll-padding-block-start ảnh hưởng đến khoảng cách giữa nội dung của phần tử và cạnh của nó.

Hỗ trợ trình duyệt

Thuộc tính scroll-margin-block-start được hỗ trợ rộng rãi bởi các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari và Edge. Tuy nhiên, hãy luôn kiểm tra tài liệu của nhà phát triển web MDN để biết thông tin hỗ trợ trình duyệt cập nhật nhất.