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

前端独秀

于 2019-09-18 16:40:58 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css3

原文链接：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

前端专栏收录该内容

493 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

代码

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页面滚动条出现时不跳动