overscroll-behavior-y
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2022å¹´9æâ©.
overscroll-behavior-y 㯠CSS ã®ããããã£ã§ãã¹ã¯ãã¼ã«é åã®åç´æ¹åã®å¢çã«éããã¨ãã®ãã©ã¦ã¶ã¼ã®æåãè¨å®ãã¾ãã
å
¨ä½çãªèª¬æ㯠overscroll-behavior ãåç
§ãã¦ãã ããã
æ§æ
/* ãã¼ã¯ã¼ãå¤ */
overscroll-behavior-y: auto; /* æ¢å®å¤ */
overscroll-behavior-y: contain;
overscroll-behavior-y: none;
/* ã°ãã¼ãã«å¤ */
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;
overscroll-behavior-y ããããã£ã¯ã次ã®å¤ã®ä¸è¦§ããé¸æããä¸ã¤ã®ãã¼ã¯ã¼ãã§æå®ãã¾ãã
å¤
auto-
æ¢å®ã®ã¹ã¯ãã¼ã«ãªã¼ãã¼ããã¼åä½ããé常éãçºçãã¾ãã
contain-
ãã®å¤ãè¨å®ãããè¦ç´ å ã§ã¯ãæ¢å®ã®ã¹ã¯ãã¼ã«ãªã¼ãã¼ããã¼åä½ï¼ãè·³ãè¿ããå¹æãªã©ï¼ãè¦ããã¾ãããã ããé£æ¥ããã¹ã¯ãã¼ã«é åã§ã®ã¹ã¯ãã¼ã«é£éã¯çºçãããèå¾ã«é ç½®ãããè¦ç´ ã¯ã¹ã¯ãã¼ã«ãã¾ããã
containã®å¤ã§ã¯ãåç´æ¹åã®å¼ãã¦æ´æ°ã®ã¸ã§ã¹ãã£ã¼ããæ°´å¹³æ¹åã®ã¹ã¯ã¤ãæä½ãå«ãããã©ã¦ã¶ã¼ã®ãã¤ãã£ãããã²ã¼ã·ã§ã³ãç¡å¹ã«ãªãã¾ãã none-
é£æ¥ããã¹ã¯ãã¼ã«é åã¸ã®ã¹ã¯ãã¼ã«ã®é£éã¯çºçãããæ¢å®ã®ã¹ã¯ãã¼ã«ãªã¼ãã¼ããã¼åä½ãææ¢ããã¾ãã
å ¬å¼å®ç¾©
| åæå¤ | auto |
|---|---|
| é©ç¨å¯¾è±¡ | éç½®æãããã¯ã¬ãã«è¦ç´ ã¨éç½®æã¤ã³ã©ã¤ã³ãããã¯è¦ç´ |
| ç¶æ¿ | ãªã |
| è¨ç®å¤ | æå®éã |
| ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡ | é¢æ£å¤ |
å½¢å¼ææ³
overscroll-behavior-y =
contain |
none |
auto
ä¾
èå¾ã«ããè¦ç´ ã®ç¸¦ã¹ã¯ãã¼ã«ã®ææ¢
.messages {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
}
å®å
¨ãªä¾ã¨èª¬æã«ã¤ãã¦ã¯ã overscroll-behavior ãåç
§ãã¦ãã ããã
ä»æ§æ¸
| Specification |
|---|
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |