使用原生CSS滚动动画实现滚动指示器实例页面

效果：

//张鑫旭：滚动上面的容器

代码：

CSS代码：

.scroller {
    height: 200px;
    max-width: 480px;
    border: 1px solid;
    overflow: auto;
    scroll-timeline: --indicator;
}
.scroller ins {
    display: block;
    border-top: solid green;
    animation-name: widthExpand;
    animation-duration: 1ms; /* Firefox需要设置这个*/
    animation-timeline: --indicator;
    position: sticky;
    top: 0;
}
@keyframes widthExpand {
    from { width: 0%; }    
    to { width: 100%; }
}

HTML代码：

<div class="scroller">
    <ins></ins>
    <div style="height:400px;"></div>
</div>