Animate.css 动画让页面出现多余滚动条怎么消除【免费下载链接】animate.css A cross-browser library of CSS animations. As easy to use as an easy thing.项目地址: https://gitcode.com/gh_mirrors/an/animate.css在页面中使用 Animate.css 后元素在动画过程中会被移动slide、bounce 等入场/退场类动画尤其明显超出视口或容器范围的部分会让浏览器额外渲染出横向或纵向滚动条。官方文档在 Gotchas 一节明确说明了这个现象Animate.css 的大部分动画会把元素在屏幕间移动因而可能产生滚动条处理办法是用overflow: hidden来管理。本文围绕这一排查场景给出文档中给出的定位思路和具体改法。先确认滚动条是由哪种写法引起的多余的滚动条通常来自两类写法先对号入座动画元素被移出父容器边界元素加了animate__animated加某个动画名如animate__slideInLeft、animate__bounceIn动画期间元素位置偏移超出父元素或视口范围触发滚动条。直接对根元素做动画对html或body加动画类。官方最佳实践建议避免这种做法——有报告指出这可能触发奇怪的浏览器 bug而且整页弹跳对用户没有价值。如果是第 1 种按下一节的方案处理如果命中第 2 种看后面动画整页时的正确包法。在动画元素的父级上设置 overflow: hidden文档给出的处理方式是用overflow: hidden基本思路是把它加在持有动画元素的父级上。例如元素本身按 基本用法 写成这样h1 classanimate__animated animate__bounceAn animated element/h1而它被放在一个容器里滚动条就会在容器或页面上冒出来。消除方法是给该容器加上overflow: hidden/* 持有动画元素的父容器 */ .my-container { overflow: hidden; } /* 被动画的子元素保持不变 */ .my-container h1 { display: inline-block; }需要替换的只有容器选择器把.my-container换成你自己页面中包住那个动画元素的实际选择器。父级选错了比如加在动画元素自身或更外层时动画溢出的部分可能依然会撑出滚动条按哪个元素把动画元素装在里面来确定加在谁身上。动画整页时的正确包法如果你确实需要整页入场这类效果不要直接给body加动画类而是按官方示例包一层元素再动画这层body main classanimate__animated animate__fadeInLeft !-- Your code -- /main /body这个例子来自官方文档选择器与动画类可按实际页面替换。包一层之后整页位移发生在main这一层再配合它父级的overflow: hidden如需要即可收敛滚动条。边界与限制官方文档明确说没有一套固定的配方来决定何时、在哪个父级上使用overflow: hidden具体加在哪里需要结合页面布局判断。如果某个父容器本身依赖滚动例如列表需要纵向滚动对它整体加overflow: hidden会把滚动一并裁掉需要按文档的说法自行权衡加在哪一层。动画元素必须是块级或inline-block级元素。文档指出对行内元素做动画不符合 CSS 动画规范、在部分浏览器会失效如果动画没生效先检查元素是否设置了display: inline-block。以上规则出自 最佳实践与 Gotchas 文档其中 Overflow 一节就是针对动画产生滚动条这一现象的说明。验证方式文档没有提供专门的健康检查命令验证直接发生在浏览器里刷新页面后让动画完整播放一遍观察原先出现多余滚动条的方向横向或纵向不再出现同时确认动画元素本身没有被overflow: hidden意外裁切、页面其他依赖滚动的区域仍可正常滚动。若滚动条仍在回到上一节检查overflow: hidden是否加在了真正持有动画元素的父级上。【免费下载链接】animate.css A cross-browser library of CSS animations. As easy to use as an easy thing.项目地址: https://gitcode.com/gh_mirrors/an/animate.css创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考