Animate.CSS добавляет полосу прокрутки?

Я использую Animate.CSS и эффект "петли", чтобы изображение выпадало за пределы экрана. Когда он уходит с экрана, он добавляет на страницу вертикальную полосу прокрутки. При прокрутке ничего не видно. Почему добавляется эта полоса прокрутки и как ее не добавлять?

Спасибо!

Код:

HTML

<img id="animate" class="fear" src="/2012/images/september/fear-sign.png" />

CSS

.fear{
     position:absolute;
     left:150px;
     top:0px;
}

#animate {
    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}

JS

var $j = jQuery.noConflict();
   $j(document).ready(function() {
       $j('#animate').addClass('animated hinge');
           });

Вот скрипка, которую я создал.


css css-animations css-transitions animate.css
person L84    schedule 02.09.2012    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Вы можете просто использовать overflow:hidden, что предотвратит полосы прокрутки:

html,body { overflow: hidden; }

Скрипт: http://jsfiddle.net/FafAH/2/

person McGarnagle    schedule 02.09.2012

arrow_upward
1
arrow_downward

Просто добавь

body{overflow:hidden;}
person Arpit Srivastava    schedule 02.09.2012

arrow_upward
-1
arrow_downward

Вы можете установить overflow-y скрытым, чтобы предотвратить вертикальные полосы прокрутки, и overflow-x, чтобы скрыть, чтобы предотвратить горизонтальные полосы прокрутки.

html, body{
    overflow-y: hidden;
}
person Unmitigated    schedule 24.11.2018