mysql w3scoll_scroll-behavior
scroll-behavior
Thescroll-behavior CSS property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead.
User agents may ignore this property. Applies to
scrolling boxes
Media
visual
Animation type
discrete
Canonical order
the unique non-ambiguous order defined by the formal grammar
Syntax /* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
Values auto The scrolling box is scrolled in an instant fashion. smooth The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.
Formal syntax auto | smooth
Example
HTML
1
2
3
CSS a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav, scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
Output
Specifications
Browser compatibility
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes)[1] 36 (36) No support (Yes)[1] No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 36 (36) No support No support No support
[1] Supported in Chrome and Opera by enabling the "Smooth Scrolling" or "Enable experimental web platform features" flag.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior