我注意到Yarn网站最近的更新,并观察到每当有一个HTML元素带有“overflow:当滚动条出现时,它有一个非常好的动画-某种“跳跃”到它的位置。
在我的Web应用程序中,我有一个div,其中包含'overflow:自动',我想添加这个动画以及。你能帮助我实现这一点吗?
你可以在这里看到一个动画的例子:https://yarnpkg.com/package?name=d3。单击侧菜单中的“版本”选项卡,您将在滚动条动画出现时看到它
超文本标记语言:
<div class="sidebar-view">
content of the div that can cause an overflow...
</div>
CSS:
.sidebar-view {
sidebar style....
overflow-y: auto;
}
.sidebar-view::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.sidebar-view::-webkit-scrollbar-thumb {
background-color: #666;
border-radius: 10px;
}
.sidebar-view::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
1条答案
按热度按时间9ceoxa921#
这是带有动画的元素:
我们注意到,当子元素的高度随着动画
ease-in-out
而改变时,滚动条也会改变。