使用 Animate.css 的问题 - 水平滚动条已添加到动画页面

Question

我正在尝试使用 Animate.css 和 jQuery @ This Demo

向文本添加一些动画

我正在使用 jquery addClass() 通过使用以下代码将 .animated、.bounceInLeft 和 .bounceInRight 应用于元素：

$(function () {
    $('#solu-title-1').addClass('animated bounceInLeft');
    $('#solu-title-2').addClass('animated bounceInRight');
    $('#solu-description-1').addClass('animated bounceInLeft');
    $('#solu-description-2').addClass('animated bounceInRight');
});

但如您所见，页面在动画过程中也变得令人讨厌 Horizontal Scrollbar。你能告诉我如何阻止它吗？

谢谢

Answer 1

body {
    overflow-x: hidden;
}

http://jsfiddle.net/DTcHh/3127/

Answer 2

其实，最好像这里这样设置：

html, body{ overflow-x: hidden; max-width: 100%}

因为移动版本不能正常工作

Answer 3

我通过添加元标记解决了这个问题

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=no">

Answer 4

我有一个类似的问题 - 我终于找到了，因为我在 React Spring（从右边淡入）中使用了一些动画，这导致向下滚动页面感觉像滑动 n 幻灯片。如上所述，我在 html 视口元标记中添加了“user-scalable=no”，它对我有用！

使用 Animate.css 的问题 - 水平滚动条已添加到动画页面

Issue on Using Animate.css - Horizontal Scrollbar Added to Page on Animation

html

javascript

css

jquery

animation