纯CSS让overflow:auto页面滚动条出现时不跳动

最新推荐文章于 2025-10-03 08:28:24 发布

转载最新推荐文章于 2025-10-03 08:28:24 发布 · 414 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=12hbkjc0j&title=%E7%BA%AFCSS%E8%AE%A9overflow%3Aauto%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E6%9D%A1%E5%87%BA%E7%8E%B0%E6%97%B6%E4%B8%8D%E8%B7%B3%E5%8A%A8

文章标签：

#css3

前端专栏收录该内容

493 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现的技巧，使页面在滚动条出现时不会产生跳动效果，通过巧妙地设置元素样式和动画，确保了用户体验的平滑过渡。

我不像标题，我是一个不会晃动的安静的小天使！

代码

CSS代码：


/*注意：私有前缀这里已省略……*/
.demo {
    margin-left: calc(100vw - 100%);
    text-align: center; overflow: hidden;
    animation: scrollbar-toggle 2s infinite alternate;
}
@keyframes scrollbar-toggle {
    from { height: 0vh; }
    to { height: 80vh; }
}

转载请注明：前端录»纯CSS让overflow:auto页面滚动条出现时不跳动