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

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

scroll-margin-block Thuộc tính chỉ định khoảng cách giữa vị trí dính (vị trí snap) và container trên 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í dính với khoảng cách được chỉ định giữa vị trí dính và container trên hướng khối.

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

Vị trí dính là vị trí mà khi bạn dừng cuộn, phần tử con dính vào vị trí trong container.

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 có hiệu lực khi được thiết lập thành 'start' hoặc 'end'.

scroll-margin-block Thuộc tính là viết tắt của các thuộc tính sau:

scroll-margin-block Giá trị của thuộc tính có thể được thiết lập theo nhiều cách:

Nếu thuộc tính scroll-margin-block có hai giá trị:

scroll-margin-block: 10px 50px;
  • Khoảng cách từ đầu là 10px
  • Khoảng cách từ cuối là 50px

Nếu thuộc tính scroll-margin-block có một giá trị:

scroll-margin-block: 10px;
  • Khoảng cách từ đầu và cuối đều là 10px

Để xem scroll-margin-block Thuộc tính trên phần tử cha, thì phải thiết lập scroll-margin-block và scroll-snap-align Thuộc tính, và thiết lập 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 giống nhau, 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

Đặt khoảng cách từ vị trí dính khối hướng đến hộp chứa cuộn:

div {
  scroll-margin-block: 10px;
}

Thử ngay

Ví dụ 2

Khi phần tử con của writing-mode Khi thuộc tính giá trị được thiết lập là vertical-rl, vị trí bắt đầu của phần tử trong hướng khối di chuyển từ trên xuống phải, vị trí kết thúc di chuyển từ dưới lên trái. Điều này sẽ ảnh hưởng đến hành vi cuộn dính và scroll-margin-block Cách hoạt động của thuộc tính:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Thử ngay

Ngôn ngữ CSS

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

Giá trị thuộc tính

Giá trị Mô tả
0 Mặc định. Giá trị mặc định của scroll-margin-block của phần tử.
length

Định nghĩa khoảng cách bằng px, pt, cm, v.v. Cho phép giá trị âm.

Xem thêm:Đơn vị CSS.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: 0
Kế thừa: Không
Chế tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Ngôn ngữ lập trình JavaScript: object.style.scrollMarginBlock="20px"

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.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Trang liên quan

Tham khảo：Thuộc tính scroll-margin-block-end của CSS

Tham khảo：Thuộc tính scroll-margin-block-start của CSS

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 CSS