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

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

scroll-margin-block-start Thuộc tính này xác định khoảng cách giữa vị trí hấp dẫn theo hướng khối và容器.

Đ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í hấp dẫn của phần tử con theo hướng khối với khoảng cách được chỉ định so với容器.

Hướng khối là hướng đặt của dòng tiếp theo so với dòng hiện tại,这也是具有 CSS display: block; 的标签（如 <p> 和 <div> 标签）在页面上的布局方式。块方向取决于书写语言，例如蒙古语的新行是从左到右排列的，因此块方向是从左到右的，而英文页面的块方向是向下的。块方向可以通过 CSS 属性 writing-mode 定义。

Định nghĩa.

Vị trí dính là vị trí mà phần tử con dính vào khi bạn dừng cuộn.Lưu ý: scroll-snap-align Thuộc tính này chỉ hoạt động trong hướng khối.

Thuộc tính này mới hoạt động khi thuộc tính này được thiết lập thành 'start'. scroll-margin-block-start phải được thiết lập trên phần tử con để thấy hiệu ứng của thuộc tính này. scroll-margin-block-start và scroll-snap-align phải được thiết lập trên phần tử con, và trên phần tử cha 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 này 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相似, 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ẫu

Ví dụ 1

Trong hướng khối, thiết lập vị trí canh chỉnh với viền cuộn bên ngoài của khối là 20px:

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

Thử ngay

Ví dụ 2

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

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

Thử ngay

Ngữ pháp CSS

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

Giá trị thuộc tính

Giá trị Mô tả
0 Mặc định. Khoảng cách scroll-margin mặc định 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 Thuộc tính này được kế thừa từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: 0
Di truyền: Không
Ch製 hoạt hình: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến hoạt hình.
Phiên bản: CSS3
Ngữ pháp JavaScript: object.style.scrollMarginBlockStart="20px"

Hỗ trợ trình duyệt

Số 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-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