Блог

Главная - Вопросы по программированию - Полоса прокрутки исчезнет во время анимации? есть идеи по решению этой проблемы?

Полоса прокрутки исчезнет во время анимации? есть идеи по решению этой проблемы?

#jquery

#jquery

Вопрос:

Похоже, что во время анимации тега pre полоса прокрутки pre исчезнет, но появится позже, когда анимация закончится. как я могу заставить ее отображаться во всей анимации?

 <script type="text/javascript">
$(document).ready(function(){   
        $('pre').hover(
                function(){
                    if($(this).width()==520){
                        $(this).animate({width:'800'},400);
                        $(this).css({border:'2px solid #2B99E6'});
                    }
                },
                function(){
                    if($(this).width()==800){
                        $(this).animate({width:'520'},400);
                        $(this).css({border:'2px solid #555555'});
                    }
                }
        );      
});
</script>

<style type="text/css">
pre {
    background: url("images/source.jpg") no-repeat scroll 0 0 #333333;
    border: 2px solid #555555;
    color: green;
    font-family: arial;
    margin: 0;
    overflow: scroll;
    padding: 30px 0 20px;
    position: relative;
    width: 520px;
    display: block;
}
</style>

<pre>
test it: www.gbin1.com
</pre>

Комментарии:

1. на самом деле вы не можете поместить полосу прокрутки на изменяющуюся ширину / высоту без какого-либо серьезного кодирования… Зачем кому-то прокручивать во время анимации?

Ответ №1:

измените свои свойства css на 

 pre {
  overflow:scroll !important;
}

как сделано в этом примере
http://jsfiddle.net/vTBV4 /

однако !important флаг может работать не во всех браузерах : ( но, насколько я знаю, это единственный способ гарантировать, что прокрутка видна, поскольку jquery animate неявно устанавливает встроенный стиль overflow: hidden для элемента, который нужно анимировать.

Другим вариантом может быть создание и анимация родительского контейнера вместо <pre> .