Thuộc tính scroll-padding-inline của CSS

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

scroll-padding-inline thuộc tính chỉ định khoảng cách từ container đến vị trí dính của phần tử con trong hướng hàng nội bộ.

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à container.

Hướng hàng nội bộ là hướng đặt của ký tự tiếp theo so với vị trí của ký tự hiện tại trong một dòng. Đây cũng là cách các thẻ có CSS display: inline; (như thẻ <a> và <strong>) được sắp đặt trong văn bản. Hướng hàng nội bộ phụ thuộc vào ngôn ngữ viết, ví dụ, các ký tự mới của tiếng Ả Rập được sắp xếp từ phải qua trái, làm cho hướng hàng nội bộ là từ phải qua trái, trong khi trang tiếng Anh có hướng hàng nội bộ từ trái qua phải. Hướng hàng nội bộ 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 dính vào khi bạn dừng cuộn trong container.

Lưu ý:thuộc tính này chỉ áp dụng cho hướng hàng nội bộ,scroll-snap-align chỉ có hiệu lực khi thuộc tính được thiết lập thành 'start' hoặc 'end'.

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

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline 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-padding-inline có hai giá trị:

scroll-padding-inline: 10px 50px;

• cách đầu là 10px
• cách cuối là 50px

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

scroll-padding-inline: 10px;

• cách đầu và cuối đều là 10px

để thấy scroll-padding-inline trên phần tử cha, phải đặt thuộc tính scroll-snap-align 属性, và đặt thuộc tính scroll-padding-inline và scroll-snap-type 属性。

CSS của scroll-padding-block và scroll-padding-inline 属性 và CSS 属性 Thuộc tính scroll-padding-top của CSS、scroll-padding-bottom、scroll-padding-left và scroll-padding-right rất giống nhau, nhưng scroll-padding-block và scroll-padding-inline Thuộc tính này phụ thuộc vào hướng khối và hướng nội dòng.

Mô hình

Ví dụ 1

Đặt lề trong hướng nội dòng của cuộn, từ khối đến vị trí dính là 20px:

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

Thử nghiệm trực tiếp

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

Trong hình ảnh galleri có hành vi dính trượt, có thể sử dụng scroll-padding-inline Thuộc tính sẽ đẩy hình ảnh ra khỏi phần tử cố định:

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

Thử nghiệm trực tiếp

Ví dụ 3

Khi phần tử của phần tử chứa writing-mode Khi giá trị thuộc tính được đặt là 'vertical-rl', vị trí bắt đầu của khối và các phần tử con trên hướng nội dòng sẽ di chuyển từ bên trái sang trên, vị trí kết thúc sẽ 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 trượt và scroll-padding-inline Cách hoạt động của thuộc tính:

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

Thử nghiệm trực tiếp

Ví dụ 4

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

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

Thử nghiệm trực tiếp

Cú pháp CSS

scroll-padding-inline: 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.

相关页面

Tham khảo:Thuộc tính direction trong 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 trong CSS