Thuộc tính scroll-margin-block-end của CSS

Định nghĩa và cách sử dụng

scroll-margin-block-end Thuộc tính xác định khoảng cách giữa vị trí đặt và容器 theo hướng khối.

Điều này có nghĩa là khi bạn dừng cuộn, cuộn sẽ nhanh chóng điều chỉnh và dừng lại ở vị trí cuộn hút với khoảng cách được chỉ định giữa vị trí kết thúc của phần tử con theo hướng khối và容器的指定距离处。

Hướng khối là hướng tương đối với dòng hiện tại, nơi dòng tiếp theo được đặt. Đây cũng là cách các thẻ có CSS display: block; (như thẻ <p> và <div>) được bố trí trên trang. Hướng khối phụ thuộc vào ngôn ngữ viết, ví dụ, tiếng Mông Cổ có dòng mới từ trái sang phải, vì vậy hướng khối cũng từ trái sang phải, trong khi hướng khối của trang tiếng Anh là xuống dưới. Hướng khối có thể được xác định thông qua thuộc tính CSS writing-mode để định nghĩa.

Vị trí dính là vị trí mà elemen con dính vào trong khối khi bạn dừng cuộn.

Lưu ý:Thuộc tính này chỉ có hiệu lực trong hướng khối scroll-snap-align Thuộc tính này mới hoạt động khi thuộc tính này được thiết lập là 'end'.

để nhìn thấy scroll-margin-block-end Thuộc tính có hiệu lực, phải thiết lập trên elemen con scroll-margin-block-end và scroll-snap-align và thiết lập trên elemen cha Thuộc tính scroll-snap-type .

Thuộc tính của CSS scroll-margin-inline và scroll-margin-block Thuộc tính tương ứng với thuộc tính CSS Thuộc tính scroll-margin-top của CSS,scroll-margin-bottom,scroll-margin-left và scroll-margin-right rất tương tự, nhưng scroll-margin-block và scroll-margin-inline Thuộc tính này phụ thuộc vào hướng khối và hướng nội.

Mô hình

Ví dụ 1

Trong hướng khối, đặt vị trí hợp nhất giữa vị trí và mép cuộn của khối là 20px:

div {
  scroll-margin-block-end: 20px;
}

Thử nghiệm trực tiếp

Ví dụ 2

Khi elemen <div> có writing-mode Khi thuộc tính value được thiết lập là vertical-rl, hướng khối sẽ là từ phải sang trái. Kết quả là phần cuối của elemen di chuyển từ dưới lên bên trái:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

Thử nghiệm trực tiếp

Cú pháp CSS

scroll-margin-block-end: 0|value|initial|inherit;

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Trang liên quan

Tham khảo:Thuộc tính scroll-snap-align của CSS

Tham khảo:Thuộc tính scroll-snap-type của CSS

Tham khảo:Thuộc tính writing-mode trong CSS