Positioning element outside viewport for css animation without trigering scrollbar

我们两清 提交于 2021-02-10 20:24:33

问题


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%;
}

回答1:


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;

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/



来源:https://stackoverflow.com/questions/17426996/positioning-element-outside-viewport-for-css-animation-without-trigering-scrollb

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!