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

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

scroll-padding-inline-end Thuộc tính này xác định khoảng cách từ cuối khung chứa đến vị trí canh chỉnh của phần tử con theo hướng nội bộ.

Đ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í canh chỉnh và khung chứa.

Hướng nội bộ 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, điều này cũng là cách布局 của các thẻ có CSS display: inline; (như thẻ <a> và <strong>) trong văn bản. Hướng nội bộ phụ thuộc vào ngôn ngữ viết, ví dụ như ngôn ngữ Ả Rập, các ký tự mới được sắp xếp từ phải qua trái, vì vậy hướng nội bộ là từ phải qua trái, trong khi hướng nội bộ của trang tiếng Anh là từ trái qua phải. Hướng nội bộ có thể được điều chỉnh thông qua thuộc tính CSS direction và writing-mode Định nghĩa.

Vị trí canh chỉnh là vị trí mà khi bạn dừng cuộn, phần tử con sẽ canh chỉnh vào vị trí trong khung chứa.

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

Để xem scroll-padding-inline-end Thuộc tính trên phần tử cha, thì thuộc tính này phải được đặt trên phần tử con. scroll-snap-align Thuộc tính, và đặt scroll-padding-inline-end và scroll-snap-type Thuộc tính.

Mô hình

Ví dụ 1

Đặt lấp đầy cuộn hướng nội từ cuối bộ chứa đến vị trí căn chỉnh là 20px:

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

Thử nghiệm trực tiếp

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

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

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

Thử nghiệm trực tiếp

Ví dụ 3

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

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

Thử nghiệm trực tiếp

Ví dụ 4

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

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

Thử nghiệm trực tiếp

Ngôn ngữ CSS

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