animation
div {
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5 !important;
animation: fadeIn 5s infinite;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 100%;
}
100% {
opacity: 0;
}
}
-webkit-overflow-scrolling 废弃了, 不要再使用!
- touch 滑动屏幕, 手离开屏幕后, 屏幕继续滑动( 惯性滚动 )
- auto (the content immediately ceases to scroll when you remove your finger from the touchscreen.)
滚动回弹怎么消除?
滚动条大统一
body::-webkit-scrollbar {
width: 9px;
}
body::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #ccc;
}
body::-webkit-scrollbar-track {
background-color: #fff;
}
body {
scrollbar-width: thin;
scrollbar-color: #ccc red !important;
}
overflow-anchor(safari 不支持)
scroll-snap-type
en | t |
---|
accelerated scrolling | 加速滚动 |
eliminate | 消除 |
mitigate | 减轻 |
jarring | 不和谐 |
anchor | 锚 |
- 橡皮筋效果
参考资料