交互性
用于控制元素在快照容器中滚动偏移量的实用程序。
类 | 属性 |
---|---|
scroll-p-0 | scroll-padding: 0px; |
scroll-px-0 | scroll-padding-left: 0px; scroll-padding-right: 0px; |
scroll-py-0 | scroll-padding-top: 0px; scroll-padding-bottom: 0px; |
scroll-ps-0 | scroll-padding-inline-start: 0px; |
scroll-pe-0 | scroll-padding-inline-end: 0px; |
scroll-pt-0 | scroll-padding-top: 0px; |
scroll-pr-0 | scroll-padding-right: 0px; |
scroll-pb-0 | scroll-padding-bottom: 0px; |
scroll-pl-0 | scroll-padding-left: 0px; |
scroll-p-px | scroll-padding: 1px; |
scroll-px-px | scroll-padding-left: 1px; scroll-padding-right: 1px; |
scroll-py-px | scroll-padding-top: 1px; scroll-padding-bottom: 1px; |
scroll-ps-px | scroll-padding-inline-start: 1px; |
scroll-pe-px | scroll-padding-inline-end: 1px; |
scroll-pt-px | scroll-padding-top: 1px; |
scroll-pr-px | scroll-padding-right: 1px; |
scroll-pb-px | scroll-padding-bottom: 1px; |
scroll-pl-px | scroll-padding-left: 1px; |
scroll-p-0.5 | scroll-padding: 0.125rem; /* 2px */ |
scroll-px-0.5 | scroll-padding-left: 0.125rem; /* 2px */ scroll-padding-right: 0.125rem; /* 2px */ |
scroll-py-0.5 | scroll-padding-top: 0.125rem; /* 2px */ scroll-padding-bottom: 0.125rem; /* 2px */ |
scroll-ps-0.5 | scroll-padding-inline-start: 0.125rem; /* 2px */ |
scroll-pe-0.5 | scroll-padding-inline-end: 0.125rem; /* 2px */ |
scroll-pt-0.5 | scroll-padding-top: 0.125rem; /* 2px */ |
scroll-pr-0.5 | scroll-padding-right: 0.125rem; /* 2px */ |
scroll-pb-0.5 | scroll-padding-bottom: 0.125rem; /* 2px */ |
scroll-pl-0.5 | scroll-padding-left: 0.125rem; /* 2px */ |
scroll-p-1 | scroll-padding: 0.25rem; /* 4px */ |
scroll-px-1 | scroll-padding-left: 0.25rem; /* 4px */ scroll-padding-right: 0.25rem; /* 4px */ |
scroll-py-1 | scroll-padding-top: 0.25rem; /* 4px */ scroll-padding-bottom: 0.25rem; /* 4px */ |
scroll-ps-1 | scroll-padding-inline-start: 0.25rem; /* 4px */ |
scroll-pe-1 | scroll-padding-inline-end: 0.25rem; /* 4px */ |
scroll-pt-1 | scroll-padding-top: 0.25rem; /* 4px */ |
scroll-pr-1 | scroll-padding-right: 0.25rem; /* 4px */ |
scroll-pb-1 | scroll-padding-bottom: 0.25rem; /* 4px */ |
scroll-pl-1 | scroll-padding-left: 0.25rem; /* 4px */ |
scroll-p-1.5 | scroll-padding: 0.375rem; /* 6px */ |
scroll-px-1.5 | scroll-padding-left: 0.375rem; /* 6px */ scroll-padding-right: 0.375rem; /* 6px */ |
scroll-py-1.5 | scroll-padding-top: 0.375rem; /* 6px */ scroll-padding-bottom: 0.375rem; /* 6px */ |
scroll-ps-1.5 | scroll-padding-inline-start: 0.375rem; /* 6px */ |
scroll-pe-1.5 | scroll-padding-inline-end: 0.375rem; /* 6px */ |
scroll-pt-1.5 | scroll-padding-top: 0.375rem; /* 6px */ |
scroll-pr-1.5 | scroll-padding-right: 0.375rem; /* 6px */ |
scroll-pb-1.5 | scroll-padding-bottom: 0.375rem; /* 6px */ |
scroll-pl-1.5 | scroll-padding-left: 0.375rem; /* 6px */ |
scroll-p-2 | scroll-padding: 0.5rem; /* 8px */ |
scroll-px-2 | scroll-padding-left: 0.5rem; /* 8px */ scroll-padding-right: 0.5rem; /* 8px */ |
scroll-py-2 | scroll-padding-top: 0.5rem; /* 8px */ scroll-padding-bottom: 0.5rem; /* 8px */ |
scroll-ps-2 | scroll-padding-inline-start: 0.5rem; /* 8px */ |
scroll-pe-2 | scroll-padding-inline-end: 0.5rem; /* 8px */ |
scroll-pt-2 | scroll-padding-top: 0.5rem; /* 8px */ |
scroll-pr-2 | scroll-padding-right: 0.5rem; /* 8px */ |
scroll-pb-2 | scroll-padding-bottom: 0.5rem; /* 8px */ |
scroll-pl-2 | scroll-padding-left: 0.5rem; /* 8px */ |
scroll-p-2.5 | scroll-padding: 0.625rem; /* 10px */ |
scroll-px-2.5 | scroll-padding-left: 0.625rem; /* 10px */ scroll-padding-right: 0.625rem; /* 10px */ |
scroll-py-2.5 | scroll-padding-top: 0.625rem; /* 10px */ scroll-padding-bottom: 0.625rem; /* 10px */ |
scroll-ps-2.5 | scroll-padding-inline-start: 0.625rem; /* 10px */ |
scroll-pe-2.5 | scroll-padding-inline-end: 0.625rem; /* 10px */ |
scroll-pt-2.5 | scroll-padding-top: 0.625rem; /* 10px */ |
scroll-pr-2.5 | scroll-padding-right: 0.625rem; /* 10px */ |
scroll-pb-2.5 | scroll-padding-bottom: 0.625rem; /* 10px */ |
scroll-pl-2.5 | scroll-padding-left: 0.625rem; /* 10px */ |
scroll-p-3 | scroll-padding: 0.75rem; /* 12px */ |
scroll-px-3 | scroll-padding-left: 0.75rem; /* 12px */ scroll-padding-right: 0.75rem; /* 12px */ |
scroll-py-3 | scroll-padding-top: 0.75rem; /* 12px */ scroll-padding-bottom: 0.75rem; /* 12px */ |
scroll-ps-3 | scroll-padding-inline-start: 0.75rem; /* 12px */ |
scroll-pe-3 | scroll-padding-inline-end: 0.75rem; /* 12px */ |
scroll-pt-3 | scroll-padding-top: 0.75rem; /* 12px */ |
scroll-pr-3 | scroll-padding-right: 0.75rem; /* 12px */ |
scroll-pb-3 | scroll-padding-bottom: 0.75rem; /* 12px */ |
scroll-pl-3 | scroll-padding-left: 0.75rem; /* 12px */ |
scroll-p-3.5 | scroll-padding: 0.875rem; /* 14px */ |
scroll-px-3.5 | scroll-padding-left: 0.875rem; /* 14px */ scroll-padding-right: 0.875rem; /* 14px */ |
scroll-py-3.5 | scroll-padding-top: 0.875rem; /* 14px */ scroll-padding-bottom: 0.875rem; /* 14px */ |
scroll-ps-3.5 | scroll-padding-inline-start: 0.875rem; /* 14px */ |
scroll-pe-3.5 | scroll-padding-inline-end: 0.875rem; /* 14px */ |
scroll-pt-3.5 | scroll-padding-top: 0.875rem; /* 14px */ |
scroll-pr-3.5 | scroll-padding-right: 0.875rem; /* 14px */ |
scroll-pb-3.5 | scroll-padding-bottom: 0.875rem; /* 14px */ |
scroll-pl-3.5 | scroll-padding-left: 0.875rem; /* 14px */ |
scroll-p-4 | scroll-padding: 1rem; /* 16px */ |
scroll-px-4 | scroll-padding-left: 1rem; /* 16px */ scroll-padding-right: 1rem; /* 16px */ |
scroll-py-4 | scroll-padding-top: 1rem; /* 16px */ scroll-padding-bottom: 1rem; /* 16px */ |
scroll-ps-4 | scroll-padding-inline-start: 1rem; /* 16px */ |
scroll-pe-4 | scroll-padding-inline-end: 1rem; /* 16px */ |
scroll-pt-4 | scroll-padding-top: 1rem; /* 16px */ |
scroll-pr-4 | scroll-padding-right: 1rem; /* 16px */ |
scroll-pb-4 | scroll-padding-bottom: 1rem; /* 16px */ |
scroll-pl-4 | scroll-padding-left: 1rem; /* 16px */ |
scroll-p-5 | scroll-padding: 1.25rem; /* 20px */ |
scroll-px-5 | scroll-padding-left: 1.25rem; /* 20px */ scroll-padding-right: 1.25rem; /* 20px */ |
scroll-py-5 | scroll-padding-top: 1.25rem; /* 20px */ scroll-padding-bottom: 1.25rem; /* 20px */ |
scroll-ps-5 | scroll-padding-inline-start: 1.25rem; /* 20px */ |
scroll-pe-5 | scroll-padding-inline-end: 1.25rem; /* 20px */ |
scroll-pt-5 | scroll-padding-top: 1.25rem; /* 20px */ |
scroll-pr-5 | scroll-padding-right: 1.25rem; /* 20px */ |
scroll-pb-5 | scroll-padding-bottom: 1.25rem; /* 20px */ |
scroll-pl-5 | scroll-padding-left: 1.25rem; /* 20px */ |
scroll-p-6 | scroll-padding: 1.5rem; /* 24px */ |
scroll-px-6 | scroll-padding-left: 1.5rem; /* 24px */ scroll-padding-right: 1.5rem; /* 24px */ |
scroll-py-6 | scroll-padding-top: 1.5rem; /* 24px */ scroll-padding-bottom: 1.5rem; /* 24px */ |
scroll-ps-6 | scroll-padding-inline-start: 1.5rem; /* 24px */ |
scroll-pe-6 | scroll-padding-inline-end: 1.5rem; /* 24px */ |
scroll-pt-6 | scroll-padding-top: 1.5rem; /* 24px */ |
scroll-pr-6 | scroll-padding-right: 1.5rem; /* 24px */ |
scroll-pb-6 | scroll-padding-bottom: 1.5rem; /* 24px */ |
scroll-pl-6 | scroll-padding-left: 1.5rem; /* 24px */ |
scroll-p-7 | scroll-padding: 1.75rem; /* 28px */ |
scroll-px-7 | scroll-padding-left: 1.75rem; /* 28px */ scroll-padding-right: 1.75rem; /* 28px */ |
scroll-py-7 | scroll-padding-top: 1.75rem; /* 28px */ scroll-padding-bottom: 1.75rem; /* 28px */ |
scroll-ps-7 | scroll-padding-inline-start: 1.75rem; /* 28px */ |
scroll-pe-7 | scroll-padding-inline-end: 1.75rem; /* 28px */ |
scroll-pt-7 | scroll-padding-top: 1.75rem; /* 28px */ |
scroll-pr-7 | scroll-padding-right: 1.75rem; /* 28px */ |
scroll-pb-7 | scroll-padding-bottom: 1.75rem; /* 28px */ |
scroll-pl-7 | scroll-padding-left: 1.75rem; /* 28px */ |
scroll-p-8 | scroll-padding: 2rem; /* 32px */ |
scroll-px-8 | scroll-padding-left: 2rem; /* 32px */ scroll-padding-right: 2rem; /* 32px */ |
scroll-py-8 | scroll-padding-top: 2rem; /* 32px */ scroll-padding-bottom: 2rem; /* 32px */ |
scroll-ps-8 | scroll-padding-inline-start: 2rem; /* 32px */ |
scroll-pe-8 | scroll-padding-inline-end: 2rem; /* 32px */ |
scroll-pt-8 | scroll-padding-top: 2rem; /* 32px */ |
scroll-pr-8 | scroll-padding-right: 2rem; /* 32px */ |
scroll-pb-8 | scroll-padding-bottom: 2rem; /* 32px */ |
scroll-pl-8 | scroll-padding-left: 2rem; /* 32px */ |
scroll-p-9 | scroll-padding: 2.25rem; /* 36px */ |
scroll-px-9 | scroll-padding-left: 2.25rem; /* 36px */ scroll-padding-right: 2.25rem; /* 36px */ |
scroll-py-9 | scroll-padding-top: 2.25rem; /* 36px */ scroll-padding-bottom: 2.25rem; /* 36px */ |
scroll-ps-9 | scroll-padding-inline-start: 2.25rem; /* 36px */ |
scroll-pe-9 | scroll-padding-inline-end: 2.25rem; /* 36px */ |
scroll-pt-9 | scroll-padding-top: 2.25rem; /* 36px */ |
scroll-pr-9 | scroll-padding-right: 2.25rem; /* 36px */ |
scroll-pb-9 | scroll-padding-bottom: 2.25rem; /* 36px */ |
scroll-pl-9 | scroll-padding-left: 2.25rem; /* 36px */ |
scroll-p-10 | scroll-padding: 2.5rem; /* 40px */ |
scroll-px-10 | scroll-padding-left: 2.5rem; /* 40px */ scroll-padding-right: 2.5rem; /* 40px */ |
scroll-py-10 | scroll-padding-top: 2.5rem; /* 40px */ scroll-padding-bottom: 2.5rem; /* 40px */ |
scroll-ps-10 | scroll-padding-inline-start: 2.5rem; /* 40px */ |
scroll-pe-10 | scroll-padding-inline-end: 2.5rem; /* 40px */ |
scroll-pt-10 | scroll-padding-top: 2.5rem; /* 40px */ |
scroll-pr-10 | scroll-padding-right: 2.5rem; /* 40px */ |
scroll-pb-10 | scroll-padding-bottom: 2.5rem; /* 40px */ |
scroll-pl-10 | scroll-padding-left: 2.5rem; /* 40px */ |
scroll-p-11 | scroll-padding: 2.75rem; /* 44px */ |
scroll-px-11 | scroll-padding-left: 2.75rem; /* 44px */ scroll-padding-right: 2.75rem; /* 44px */ |
scroll-py-11 | scroll-padding-top: 2.75rem; /* 44px */ scroll-padding-bottom: 2.75rem; /* 44px */ |
scroll-ps-11 | scroll-padding-inline-start: 2.75rem; /* 44px */ |
scroll-pe-11 | scroll-padding-inline-end: 2.75rem; /* 44px */ |
scroll-pt-11 | scroll-padding-top: 2.75rem; /* 44px */ |
scroll-pr-11 | scroll-padding-right: 2.75rem; /* 44px */ |
scroll-pb-11 | scroll-padding-bottom: 2.75rem; /* 44px */ |
scroll-pl-11 | scroll-padding-left: 2.75rem; /* 44px */ |
scroll-p-12 | scroll-padding: 3rem; /* 48px */ |
scroll-px-12 | scroll-padding-left: 3rem; /* 48px */ scroll-padding-right: 3rem; /* 48px */ |
scroll-py-12 | scroll-padding-top: 3rem; /* 48px */ scroll-padding-bottom: 3rem; /* 48px */ |
scroll-ps-12 | scroll-padding-inline-start: 3rem; /* 48px */ |
scroll-pe-12 | scroll-padding-inline-end: 3rem; /* 48px */ |
scroll-pt-12 | scroll-padding-top: 3rem; /* 48px */ |
scroll-pr-12 | scroll-padding-right: 3rem; /* 48px */ |
scroll-pb-12 | scroll-padding-bottom: 3rem; /* 48px */ |
scroll-pl-12 | scroll-padding-left: 3rem; /* 48px */ |
scroll-p-14 | scroll-padding: 3.5rem; /* 56px */ |
scroll-px-14 | scroll-padding-left: 3.5rem; /* 56px */ scroll-padding-right: 3.5rem; /* 56px */ |
scroll-py-14 | scroll-padding-top: 3.5rem; /* 56px */ scroll-padding-bottom: 3.5rem; /* 56px */ |
scroll-ps-14 | scroll-padding-inline-start: 3.5rem; /* 56px */ |
scroll-pe-14 | scroll-padding-inline-end: 3.5rem; /* 56px */ |
scroll-pt-14 | scroll-padding-top: 3.5rem; /* 56px */ |
scroll-pr-14 | scroll-padding-right: 3.5rem; /* 56px */ |
scroll-pb-14 | scroll-padding-bottom: 3.5rem; /* 56px */ |
scroll-pl-14 | scroll-padding-left: 3.5rem; /* 56px */ |
scroll-p-16 | scroll-padding: 4rem; /* 64px */ |
scroll-px-16 | scroll-padding-left: 4rem; /* 64px */ scroll-padding-right: 4rem; /* 64px */ |
scroll-py-16 | scroll-padding-top: 4rem; /* 64px */ scroll-padding-bottom: 4rem; /* 64px */ |
scroll-ps-16 | scroll-padding-inline-start: 4rem; /* 64px */ |
scroll-pe-16 | scroll-padding-inline-end: 4rem; /* 64px */ |
scroll-pt-16 | scroll-padding-top: 4rem; /* 64px */ |
scroll-pr-16 | scroll-padding-right: 4rem; /* 64px */ |
scroll-pb-16 | scroll-padding-bottom: 4rem; /* 64px */ |
scroll-pl-16 | scroll-padding-left: 4rem; /* 64px */ |
scroll-p-20 | scroll-padding: 5rem; /* 80px */ |
scroll-px-20 | scroll-padding-left: 5rem; /* 80px */ scroll-padding-right: 5rem; /* 80px */ |
scroll-py-20 | scroll-padding-top: 5rem; /* 80px */ scroll-padding-bottom: 5rem; /* 80px */ |
scroll-ps-20 | scroll-padding-inline-start: 5rem; /* 80px */ |
scroll-pe-20 | scroll-padding-inline-end: 5rem; /* 80px */ |
scroll-pt-20 | scroll-padding-top: 5rem; /* 80px */ |
scroll-pr-20 | scroll-padding-right: 5rem; /* 80px */ |
scroll-pb-20 | scroll-padding-bottom: 5rem; /* 80px */ |
scroll-pl-20 | scroll-padding-left: 5rem; /* 80px */ |
scroll-p-24 | scroll-padding: 6rem; /* 96px */ |
scroll-px-24 | scroll-padding-left: 6rem; /* 96px */ scroll-padding-right: 6rem; /* 96px */ |
scroll-py-24 | scroll-padding-top: 6rem; /* 96px */ scroll-padding-bottom: 6rem; /* 96px */ |
scroll-ps-24 | scroll-padding-inline-start: 6rem; /* 96px */ |
scroll-pe-24 | scroll-padding-inline-end: 6rem; /* 96px */ |
scroll-pt-24 | scroll-padding-top: 6rem; /* 96px */ |
scroll-pr-24 | scroll-padding-right: 6rem; /* 96px */ |
scroll-pb-24 | scroll-padding-bottom: 6rem; /* 96px */ |
scroll-pl-24 | scroll-padding-left: 6rem; /* 96px */ |
scroll-p-28 | scroll-padding: 7rem; /* 112px */ |
scroll-px-28 | scroll-padding-left: 7rem; /* 112px */ scroll-padding-right: 7rem; /* 112px */ |
scroll-py-28 | scroll-padding-top: 7rem; /* 112px */ scroll-padding-bottom: 7rem; /* 112px */ |
scroll-ps-28 | scroll-padding-inline-start: 7rem; /* 112px */ |
scroll-pe-28 | scroll-padding-inline-end: 7rem; /* 112px */ |
scroll-pt-28 | scroll-padding-top: 7rem; /* 112px */ |
scroll-pr-28 | scroll-padding-right: 7rem; /* 112px */ |
scroll-pb-28 | scroll-padding-bottom: 7rem; /* 112px */ |
scroll-pl-28 | scroll-padding-left: 7rem; /* 112px */ |
scroll-p-32 | scroll-padding: 8rem; /* 128px */ |
scroll-px-32 | scroll-padding-left: 8rem; /* 128px */ scroll-padding-right: 8rem; /* 128px */ |
scroll-py-32 | scroll-padding-top: 8rem; /* 128px */ scroll-padding-bottom: 8rem; /* 128px */ |
scroll-ps-32 | scroll-padding-inline-start: 8rem; /* 128px */ |
scroll-pe-32 | scroll-padding-inline-end: 8rem; /* 128px */ |
scroll-pt-32 | scroll-padding-top: 8rem; /* 128px */ |
scroll-pr-32 | scroll-padding-right: 8rem; /* 128px */ |
scroll-pb-32 | scroll-padding-bottom: 8rem; /* 128px */ |
scroll-pl-32 | scroll-padding-left: 8rem; /* 128px */ |
scroll-p-36 | scroll-padding: 9rem; /* 144px */ |
scroll-px-36 | scroll-padding-left: 9rem; /* 144px */ scroll-padding-right: 9rem; /* 144px */ |
scroll-py-36 | scroll-padding-top: 9rem; /* 144px */ scroll-padding-bottom: 9rem; /* 144px */ |
scroll-ps-36 | scroll-padding-inline-start: 9rem; /* 144px */ |
scroll-pe-36 | scroll-padding-inline-end: 9rem; /* 144px */ |
scroll-pt-36 | scroll-padding-top: 9rem; /* 144px */ |
scroll-pr-36 | scroll-padding-right: 9rem; /* 144px */ |
scroll-pb-36 | scroll-padding-bottom: 9rem; /* 144px */ |
scroll-pl-36 | scroll-padding-left: 9rem; /* 144px */ |
scroll-p-40 | scroll-padding: 10rem; /* 160px */ |
scroll-px-40 | scroll-padding-left: 10rem; /* 160px */ scroll-padding-right: 10rem; /* 160px */ |
scroll-py-40 | scroll-padding-top: 10rem; /* 160px */ scroll-padding-bottom: 10rem; /* 160px */ |
scroll-ps-40 | scroll-padding-inline-start: 10rem; /* 160px */ |
scroll-pe-40 | scroll-padding-inline-end: 10rem; /* 160px */ |
scroll-pt-40 | scroll-padding-top: 10rem; /* 160px */ |
scroll-pr-40 | scroll-padding-right: 10rem; /* 160px */ |
scroll-pb-40 | scroll-padding-bottom: 10rem; /* 160px */ |
scroll-pl-40 | scroll-padding-left: 10rem; /* 160px */ |
scroll-p-44 | scroll-padding: 11rem; /* 176px */ |
scroll-px-44 | scroll-padding-left: 11rem; /* 176px */ scroll-padding-right: 11rem; /* 176px */ |
scroll-py-44 | scroll-padding-top: 11rem; /* 176px */ scroll-padding-bottom: 11rem; /* 176px */ |
scroll-ps-44 | scroll-padding-inline-start: 11rem; /* 176px */ |
scroll-pe-44 | scroll-padding-inline-end: 11rem; /* 176px */ |
scroll-pt-44 | scroll-padding-top: 11rem; /* 176px */ |
scroll-pr-44 | scroll-padding-right: 11rem; /* 176px */ |
scroll-pb-44 | scroll-padding-bottom: 11rem; /* 176px */ |
scroll-pl-44 | scroll-padding-left: 11rem; /* 176px */ |
scroll-p-48 | scroll-padding: 12rem; /* 192px */ |
scroll-px-48 | scroll-padding-left: 12rem; /* 192px */ scroll-padding-right: 12rem; /* 192px */ |
scroll-py-48 | scroll-padding-top: 12rem; /* 192px */ scroll-padding-bottom: 12rem; /* 192px */ |
scroll-ps-48 | scroll-padding-inline-start: 12rem; /* 192px */ |
scroll-pe-48 | scroll-padding-inline-end: 12rem; /* 192px */ |
scroll-pt-48 | scroll-padding-top: 12rem; /* 192px */ |
scroll-pr-48 | scroll-padding-right: 12rem; /* 192px */ |
scroll-pb-48 | scroll-padding-bottom: 12rem; /* 192px */ |
scroll-pl-48 | scroll-padding-left: 12rem; /* 192px */ |
scroll-p-52 | scroll-padding: 13rem; /* 208px */ |
scroll-px-52 | scroll-padding-left: 13rem; /* 208px */ scroll-padding-right: 13rem; /* 208px */ |
scroll-py-52 | scroll-padding-top: 13rem; /* 208px */ scroll-padding-bottom: 13rem; /* 208px */ |
scroll-ps-52 | scroll-padding-inline-start: 13rem; /* 208px */ |
scroll-pe-52 | scroll-padding-inline-end: 13rem; /* 208px */ |
scroll-pt-52 | scroll-padding-top: 13rem; /* 208px */ |
scroll-pr-52 | scroll-padding-right: 13rem; /* 208px */ |
scroll-pb-52 | scroll-padding-bottom: 13rem; /* 208px */ |
scroll-pl-52 | scroll-padding-left: 13rem; /* 208px */ |
scroll-p-56 | scroll-padding: 14rem; /* 224px */ |
scroll-px-56 | scroll-padding-left: 14rem; /* 224px */ scroll-padding-right: 14rem; /* 224px */ |
scroll-py-56 | scroll-padding-top: 14rem; /* 224px */ scroll-padding-bottom: 14rem; /* 224px */ |
scroll-ps-56 | scroll-padding-inline-start: 14rem; /* 224px */ |
scroll-pe-56 | scroll-padding-inline-end: 14rem; /* 224px */ |
scroll-pt-56 | scroll-padding-top: 14rem; /* 224px */ |
scroll-pr-56 | scroll-padding-right: 14rem; /* 224px */ |
scroll-pb-56 | scroll-padding-bottom: 14rem; /* 224px */ |
scroll-pl-56 | scroll-padding-left: 14rem; /* 224px */ |
scroll-p-60 | scroll-padding: 15rem; /* 240px */ |
scroll-px-60 | scroll-padding-left: 15rem; /* 240px */ scroll-padding-right: 15rem; /* 240px */ |
scroll-py-60 | scroll-padding-top: 15rem; /* 240px */ scroll-padding-bottom: 15rem; /* 240px */ |
scroll-ps-60 | scroll-padding-inline-start: 15rem; /* 240px */ |
scroll-pe-60 | scroll-padding-inline-end: 15rem; /* 240px */ |
scroll-pt-60 | scroll-padding-top: 15rem; /* 240px */ |
scroll-pr-60 | scroll-padding-right: 15rem; /* 240px */ |
scroll-pb-60 | scroll-padding-bottom: 15rem; /* 240px */ |
scroll-pl-60 | scroll-padding-left: 15rem; /* 240px */ |
scroll-p-64 | scroll-padding: 16rem; /* 256px */ |
scroll-px-64 | scroll-padding-left: 16rem; /* 256px */ scroll-padding-right: 16rem; /* 256px */ |
scroll-py-64 | scroll-padding-top: 16rem; /* 256px */ scroll-padding-bottom: 16rem; /* 256px */ |
scroll-ps-64 | scroll-padding-inline-start: 16rem; /* 256px */ |
scroll-pe-64 | scroll-padding-inline-end: 16rem; /* 256px */ |
scroll-pt-64 | scroll-padding-top: 16rem; /* 256px */ |
scroll-pr-64 | scroll-padding-right: 16rem; /* 256px */ |
scroll-pb-64 | scroll-padding-bottom: 16rem; /* 256px */ |
scroll-pl-64 | scroll-padding-left: 16rem; /* 256px */ |
scroll-p-72 | scroll-padding: 18rem; /* 288px */ |
scroll-px-72 | scroll-padding-left: 18rem; /* 288px */ scroll-padding-right: 18rem; /* 288px */ |
scroll-py-72 | scroll-padding-top: 18rem; /* 288px */ scroll-padding-bottom: 18rem; /* 288px */ |
scroll-ps-72 | scroll-padding-inline-start: 18rem; /* 288px */ |
scroll-pe-72 | scroll-padding-inline-end: 18rem; /* 288px */ |
scroll-pt-72 | scroll-padding-top: 18rem; /* 288px */ |
scroll-pr-72 | scroll-padding-right: 18rem; /* 288px */ |
scroll-pb-72 | scroll-padding-bottom: 18rem; /* 288px */ |
scroll-pl-72 | scroll-padding-left: 18rem; /* 288px */ |
scroll-p-80 | scroll-padding: 20rem; /* 320px */ |
scroll-px-80 | scroll-padding-left: 20rem; /* 320px */ scroll-padding-right: 20rem; /* 320px */ |
scroll-py-80 | scroll-padding-top: 20rem; /* 320px */ scroll-padding-bottom: 20rem; /* 320px */ |
scroll-ps-80 | scroll-padding-inline-start: 20rem; /* 320px */ |
scroll-pe-80 | scroll-padding-inline-end: 20rem; /* 320px */ |
scroll-pt-80 | scroll-padding-top: 20rem; /* 320px */ |
scroll-pr-80 | scroll-padding-right: 20rem; /* 320px */ |
scroll-pb-80 | scroll-padding-bottom: 20rem; /* 320px */ |
scroll-pl-80 | scroll-padding-left: 20rem; /* 320px */ |
scroll-p-96 | scroll-padding: 24rem; /* 384px */ |
scroll-px-96 | scroll-padding-left: 24rem; /* 384px */ scroll-padding-right: 24rem; /* 384px */ |
scroll-py-96 | scroll-padding-top: 24rem; /* 384px */ scroll-padding-bottom: 24rem; /* 384px */ |
scroll-ps-96 | scroll-padding-inline-start: 24rem; /* 384px */ |
scroll-pe-96 | scroll-padding-inline-end: 24rem; /* 384px */ |
scroll-pt-96 | scroll-padding-top: 24rem; /* 384px */ |
scroll-pr-96 | scroll-padding-right: 24rem; /* 384px */ |
scroll-pb-96 | scroll-padding-bottom: 24rem; /* 384px */ |
scroll-pl-96 | scroll-padding-left: 24rem; /* 384px */ |
使用 `scroll-p{side}-{size}` 实用程序在快照容器内设置元素的滚动偏移量。
滚动图像网格以查看预期行为。
<div class="scroll-pl-6 snap-x ...">
<div class="snap-start ...">
<img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
</div>
<div class="snap-start ...">
<img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
</div>
<div class="snap-start ...">
<img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
</div>
<div class="snap-start ...">
<img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
</div>
<div class="snap-start ...">
<img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
</div>
</div>
使用 `scroll-ps-*` 和 `scroll-pe-*` 实用程序设置 `scroll-padding-inline-start` 和 `scroll-padding-inline-end` 逻辑属性,它们映射到左侧或右侧,具体取决于文本方向。
滚动图像网格以查看预期行为。
从左到右
从右到左
<div dir="ltr">
<div class="scroll-ps-6 snap-x ...">
<!-- ... -->
</div>
</div>
<div dir="rtl">
<div class="scroll-ps-6 snap-x ...">
<!-- ... -->
</div>
</div>
为了获得更多控制,您还可以使用 LTR 和 RTL 修饰符 根据当前文本方向有条件地应用特定样式。
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 `hover:scroll-p-0` 仅在悬停时应用 `scroll-p-0` 实用程序。
<div class="scroll-p-8 hover:scroll-p-0">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其它状态 文档。
您也可以使用变体修饰符来定位媒体查询,例如响应式断点、深色模式、首选减少运动等等。例如,使用 md:scroll-p-0
仅在中等屏幕尺寸及以上应用 scroll-p-0
实用程序。
<div class="scroll-p-8 md:scroll-p-0">
<!-- ... -->
</div>
要了解更多信息,请查看有关 响应式设计、深色模式 和 其他媒体查询修饰符 的文档。
默认情况下,Tailwind 的滚动填充比例使用 默认间距比例。您可以通过编辑 theme.spacing
或 theme.extend.spacing
在您的 tailwind.config.js
文件中自定义您的间距比例。
module.exports = {
theme: {
extend: {
spacing: {
'96': '24rem',
}
}
}
}
或者,您可以通过编辑 theme.scrollPadding
或 theme.extend.scrollPadding
在您的 tailwind.config.js
文件中自定义滚动填充比例。
module.exports = {
theme: {
extend: {
scrollPadding: {
'96': '24rem',
},
}
}
}
了解有关在 主题自定义 文档中自定义默认主题的更多信息。
如果您需要使用一次性的 scroll-padding
值,而该值不适合包含在您的主题中,请使用方括号使用任何任意值动态生成属性。
<div class="scroll-p-[24rem]">
<!-- ... -->
</div>
在 任意值 文档中了解更多关于任意值支持的信息。