在CSS动画的视口外定位元素，而无需触发滚动条 [英] Positioning element outside viewport for css animation without trigering scrollbar

问题描述

我正在创建简单的CSS动画，其中文本从右滑到页面.我正在使用jQuery通过向元素添加类来触发动画.但是起始位置必须在视口之外，并且触发底部滚动条出现.如何预防呢?
这是相关的css片段

I'm creating simple css animation of text sliding to the page from right. I'm using jQuery to trigger animation by adding a class to element. But the start position must be outside viewport and that triggers bottom scrollbar to appear. How to prevent that?
This is relevant css fragment

h2{
position:absolute;
right:-500px;
top:190px;
font-size:45px;
.transition(3s,  linear);
}
h2.centered{
top:88px;
left:30%;
}

推荐答案

这是您要找的东西吗?我猜您正在使用某种形式的jQuery javascript触发类的更改.这里的窍门是设置:

Is this what you are looking for? I'm guessing you are triggering the change in class with some form of javascript of jQuery. The trick here is to set:

  overflow-x: hidden;

在页面正文上(尽管这将完全删除滚动条).但是，更好的选择是将"overflow-x:hidden"应用于体内的容器div.

on the body of your page (although this will remove scrollbars entirely). The better option however would be to apply "overflow-x: hidden" to a container div within your body.

http://jsfiddle.net/Vnvet/2/

这篇关于在CSS动画的视口外定位元素，而无需触发滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！