Thuộc tính CSS cuộn-padding-inline-start
Ví dụ
Đặt phần đệm cuộn theo hướng nội tuyến thành 20px từ đầu vùng chứa đến vị trí chụp:
div {
scroll-padding-inline-start: 20px;
}
Hãy tự mình thử »Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc scroll-padding-inline-start
chỉ định khoảng cách theo hướng nội tuyến từ điểm bắt đầu của vùng chứa đến vị trí bắt trên các phần tử con.
Điều này có nghĩa là khi bạn dừng cuộn, quá trình cuộn sẽ nhanh chóng điều chỉnh và dừng ở một khoảng cách xác định giữa vị trí chụp và vùng chứa.
Hướng nội tuyến là nơi đặt ký tự tiếp theo so với vị trí của các ký tự hiện có trong một dòng và đây cũng là cách các thẻ có CSS display: inline;
như các thẻ <a> và <strong> được trình bày trong văn bản. Hướng nội tuyến phụ thuộc vào ngôn ngữ viết, tức là tiếng Ả Rập, trong đó các ký tự mới được sắp xếp từ phải sang trái, tạo hướng nội tuyến từ phải sang trái, trong khi các trang bằng tiếng Anh có hướng nội tuyến từ trái sang phải. Hướng nội tuyến có thể được xác định bằng thuộc tính CSS direction
và writing-mode
.
Vị trí đính là vị trí trên phần tử con nơi nó khớp vào vị trí trong vùng chứa khi bạn dừng cuộn.
Lưu ý: Thuộc tính này chỉ hoạt động nếu thuộc tính cuộn-snap-align được đặt thành 'bắt đầu' cho hướng nội tuyến.
Để xem hiệu ứng từ thuộc tính scroll-padding-inline-start
, thuộc tính scroll-snap-align
phải được đặt trên các phần tử con và phải đặt thuộc scroll-padding-inline-start
và scroll-snap-type
trên phần tử cha.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.scrollPaddingInlineStart="20px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
scroll-padding-inline-start | 69.0 | 79.0 | 68.0 | 15.0 | 56.0 |
Cú pháp CSS
scroll-padding-inline-start: auto| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | Default value. The browser calculates the padding |
length | Specifies scroll-padding-inline-start in px, pt, cm, etc. Negative values are not allowed. Read about length units |
% | Specifies the padding in percent of the width of the containing element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Thư viện hình ảnh
Thuộc tính scroll-padding-inline-start
có thể được sử dụng trong thư viện hình ảnh với hành vi chụp nhanh, để đẩy hình ảnh ra khỏi phía sau một phần tử cố định:
#container {
scroll-padding-inline-start: 30px;
}
Ví dụ
Với giá trị writing-mode
của phần tử vùng chứa được đặt thành 'vertical-rl', điểm bắt đầu của phần tử vùng chứa và phần tử con theo hướng nội tuyến sẽ được di chuyển từ trên xuống bên phải. Điều này ảnh hưởng đến hành vi cuộn nhanh và cách hoạt động của thuộc tính cuộn-padding-inline-start:
#container {
scroll-padding-inline-start: 20px 0;
writing-mode: vertical-rl;
}
Hãy tự mình thử »Ví dụ
Với giá trị thuộc tính direction
của phần tử vùng chứa được đặt thành 'rtl', điểm bắt đầu của phần tử vùng chứa và phần tử con theo hướng nội tuyến được di chuyển từ phía bên phải sang phía bên trái và phần cuối của phần tử vùng chứa và phần tử con được di chuyển từ bên phải xuống dưới. Điều này ảnh hưởng đến hành vi cuộn nhanh và cách hoạt động của thuộc tính cuộn đệm nội tuyến:
#container {
scroll-padding-inline-start: 20px;
diretion: rtl;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính hướng CSS: Thuộc tính CSS Direction
Thuộc tính CSS cuộn-snap-align: Thuộc tính CSS Scroll-snap-align
Thuộc tính CSS cuộn-snap-type: Thuộc tính CSS Scroll-snap-type
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS