Thuộc tính cuộn-lề-nội tuyến CSS
Ví dụ
Đặt khoảng cách đến vùng chứa có thể cuộn từ vị trí đính theo hướng nội tuyến:
div {
scroll-margin-inline: 20px;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính scroll-margin-inline
chỉ định khoảng cách theo hướng nội tuyến, giữa vị trí đính kèm và vùng chứa.
Đ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 theo hướng nội tuyến, 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.
Thuộc tính scroll-margin-inline
là thuộc tính viết tắt cho các thuộc tính sau:
Các giá trị cho thuộc tính scroll-margin-inline
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính cuộn-lề-nội tuyến có hai giá trị:
- cuộn-lề-nội tuyến: 20px 70px;
- khoảng cách lúc bắt đầu là 20px
- khoảng cách ở cuối là 70px
Nếu thuộc tính cuộn-lề-nội tuyến có một giá trị:
- cuộn-lề-nội tuyến: 20px;
- khoảng cách lúc bắt đầu và kết thúc là 20px
Để xem hiệu ứng từ thuộc tính scroll-margin-inline
, thuộc tính scroll-margin-inline
và scroll-snap-align
phải được đặt trên các phần tử con và thuộc tính scroll-snap-type
phải được đặt trên phần tử cha.
Các thuộc tính CSS scroll-margin-inline
và scroll-margin-block
rất giống với các thuộc tính CSS scroll-margin-top
, scroll-margin-bottom
, scroll-margin-left
và scroll-margin-right
, nhưng thuộc scroll-margin-block
Các thuộc tính scroll-margin-block
và scroll-margin-inline
phụ thuộc vào hướng khối và nội tuyến.
Giá trị mặc định: | 0 |
---|---|
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.scrollMarginInline="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-margin-inline | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
Cú pháp CSS
scroll-margin-inline: 0| value |initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
0 | Default. The element's default scroll-margin-inline distance. |
length | Specifies distance in px, pt, cm, etc. Negative values are allowed. Read about length units |
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ụ
Ví dụ
Với giá trị thuộc writing-mode
của phần tử <div> được đặt thành rl dọc, hướng nội tuyến hướng xuống dưới. Kết quả là phần đầu của phần tử được di chuyển từ bên trái lên trên và phần cuối của phần tử được di chuyển từ bên phải xuống dưới. Điều này cũng ảnh hưởng đến thuộc tính scroll-margin-inline
:
div {
scroll-margin-inline: 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ử <div> được đặt thành rtl, hướng trong dòng là từ phải sang trái. Kết quả là phần đầu của phần tử được di chuyển từ bên trái sang bên phải và phần cuối của phần tử được di chuyển từ bên phải sang bên trái. Điều này cũng ảnh hưởng đến thuộc tính scroll-margin-inline
:
div {
scroll-margin-inline: 0 20px;
direction: 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-lề-inline-end: Thuộc tính CSS cuộn-lề-inline-end
Thuộc tính CSS cuộn-lề-inline-start: Thuộc tính CSS cuộn-lề-inline-start
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