Thuộc tính scroll-padding-inline-start trong CSS

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

scroll-padding-inline-start thuộc tính xác định khoảng cách từ vị trí bắt đầu của容器 đến vị trí dính của phần tử con trên hướng ngang.

Đ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 ở khoảng cách được chỉ định giữa vị trí dính và容器.

Hướng ngang là hướng đặt vị trí của ký tự tiếp theo so với ký tự hiện tại trong dòng,这也是 có CSS display: inline; của các thẻ (như <a> và <strong> thẻ) cách bố trí trong văn bản. Hướng ngang phụ thuộc vào ngôn ngữ viết, ví dụ như các ký tự阿拉伯语 được sắp xếp từ phải sang trái, vì vậy hướng ngang là từ phải sang trái, trong khi hướng ngang của trang tiếng Anh là từ trái sang phải. Hướng ngang có thể được thiết lập thông qua thuộc tính CSS direction và writing-mode Định nghĩa.

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

Lưu ý:Thuộc tính này chỉ được thiết lập trên hướng ngang thuộc tính scroll-snap-align thuộc tính này mới hoạt động khi giá trị là 'start'.

để thấy scroll-padding-inline-start hiệu ứng của thuộc tính này, thì cần thiết phải đặt trên các phần tử con thuộc tính scroll-snap-align thuộc tính, và cần thiết phải đặt scroll-padding-inline-start và scroll-snap-type Thuộc tính。

Mô hình

Ví dụ 1

Đặt lề cuộn nội bộ từ vị trí bắt đầu của hộp đến vị trí dính lề cuộn theo hướng nội bộ là 20px:

div {
  scroll-padding-inline-start: 20px;
}

Thử nghiệm trực tiếp

Ví dụ 2: Thư viện hình ảnh

scroll-padding-inline-start Thuộc tính có thể được sử dụng trong thư viện hình ảnh có hành vi dính lề cuộn để đẩy hình ảnh ra sau phần tử cố định:

#container {
  scroll-padding-inline-start: 30px;
}

Thử nghiệm trực tiếp

Ví dụ 3

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

#container {
  scroll-padding-inline-start: 20px 0;
  writing-mode: vertical-rl;
}

Thử nghiệm trực tiếp

Ví dụ 4

Khi phần tử của hộp direction Khi giá trị thuộc tính được đặt là 'rtl', vị trí bắt đầu của khối và phần tử con theo hướng nội bộ di chuyển từ bên phải sang bên trái, và vị trí kết thúc của khối và phần tử con di chuyển từ bên phải xuống dưới. Điều này sẽ ảnh hưởng đến hành vi dính lề cuộn và scroll-padding-inline Cách hoạt động của thuộc tính:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Thử nghiệm trực tiếp

Cú pháp CSS

scroll-padding-inline-start: auto|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 direction trong CSS

Tham khảo：Thuộc tính scroll-snap-align trong CSS

Tham khảo：Thuộc tính scroll-snap-type trong CSS

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