javascript 滚动条出现时的动画

wsxa1bj1  于 12个月前  发布在  Java
关注(0)|答案(1)|浏览(86)

我注意到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;
  }
9ceoxa92

9ceoxa921#

这是带有动画的元素:

<ul class="menu__list" style="display: none; overflow: hidden; height: 0px; will-change: height; transition: height 1154ms ease-in-out 0s;">
  <li>...</li>
</ul>

我们注意到,当子元素的高度随着动画ease-in-out而改变时,滚动条也会改变。

相关问题