scroll-padding-top
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2021å¹´4æâ©.
scroll-padding-top ããããã£ã¯ãã¹ã¯ãã¼ã«ãã¼ãã®æé©è¡¨ç¤ºé åã®ãªãã»ãããå®ç¾©ãã¾ããã¦ã¼ã¶ã¼ã®ãã¥ã¼å
ã§ãã®ãé
ç½®ããããã®ã¿ã¼ã²ããé åã¨ãã¦ä½¿ç¨ãããé åã§ããããã«ãããä»ã®ã³ã³ãã³ãï¼åºå®ä½ç½®ã®ãã¼ã«ãã¼ããµã¤ããã¼ãªã©ï¼ã«ãã£ã¦é ããã¦ããã¹ã¯ãã¼ã«ãã¼ãã®é åãé¤å¤ããããåã«ã¿ã¼ã²ããè¦ç´ ã¨ã¹ã¯ãã¼ã«ãã¼ãã®ç«¯ã¨ã®éã«ããå¤ãã®ä½è£ãæãããããããã¨ãã§ãã¾ãã
試ãã¦ã¿ã¾ããã
scroll-padding-top: 0;
scroll-padding-top: 20px;
scroll-padding-top: 2em;
<section class="default-example" id="default-example">
<div class="scroller" id="example-element">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="info">ã¹ã¯ãã¼ã« »</div>
</section>
.default-example .info {
inline-size: 100%;
padding: 0.5em 0;
font-size: 90%;
writing-mode: vertical-rl;
}
.scroller {
text-align: left;
height: 250px;
width: 270px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
border: 1px solid black;
scroll-snap-type: y mandatory;
}
.scroller > div {
flex: 0 0 250px;
background-color: rebeccapurple;
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroller > div:nth-child(even) {
background-color: #fff;
color: rebeccapurple;
}
æ§æ
/* ãã¼ã¯ã¼ãå¤ */
scroll-padding-top: auto;
/* <length> å¤ */
scroll-padding-top: 10px;
scroll-padding-top: 1em;
scroll-padding-top: 10%;
/* ã°ãã¼ãã«å¤ */
scroll-padding-top: inherit;
scroll-padding-top: initial;
scroll-padding-top: revert;
scroll-padding-top: revert-layer;
scroll-padding-top: unset;
å¤
<length-percentage>-
ã¹ã¯ãã¼ã«ãã¼ãã®ä¸è¾ºããã®å å´ã®ãªãã»ããã§ãæå¹ãªé·ãã¾ãã¯ãã¼ã»ã³ãå¤ã§ãã
auto-
ãªãã»ããã¯ã¦ã¼ã¶ã¼ã¨ã¼ã¸ã§ã³ãã決å®ãã¾ããããã¯ä¸è¬ã« 0px ã«ãªãã¾ãããã¼ã以å¤ã®å¤ããã£ã¨é©åã§ããå ´åãã¦ã¼ã¶ã¼ã¨ã¼ã¸ã§ã³ããæ¤åºãã¦ãä»ã®å¤ãæ¡ç¨ãããã¨ãã§ãã¾ãã
å ¬å¼å®ç¾©
| åæå¤ | auto |
|---|---|
| é©ç¨å¯¾è±¡ | ã¹ã¯ãã¼ã«ã³ã³ããã¼ |
| ç¶æ¿ | ãªã |
| ãã¼ã»ã³ãå¤ | ã¹ã¯ãã¼ã«ã³ã³ããã¼ã®ã¹ã¯ãã¼ã«ãã¼ãã«å¯¾ããç¸å¯¾å¤ |
| è¨ç®å¤ | æå®éã |
| ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡ | è¨ç®å¤ã®åã«ãã |
å½¢å¼ææ³
scroll-padding-top =
auto |
<length-percentage [0,â]>
<length-percentage> =
<length> |
<percentage>
ä»æ§æ¸
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |