событие прокрутки срабатывает, когда размер div изменяется с помощью скрипта в Chrome, но не в IE9

#javascript #events #cross-browser #scroll

#javascript #Мероприятия #кроссбраузерный #прокрутка

Вопрос:

скрипта:http://jsfiddle.net/Xc3ud/4 /

в Chrome, когда размер поля содержимого изменяется с помощью скрипта, он вызывает событие прокрутки и избавляется от моего вспомогательного элемента прокрутки.

в IE9 это событие прокрутки не запускается, поэтому вспомогательный элемент прокрутки застрял на странице и не исчезнет, потому что страница не прокручивается, но теперь он не сможет запускать прокрутку, потому что содержимое изменилось

как я могу запустить обновление в IE9?

Я использую Durandal, так что это СПА

HTML:

 <div class="page">
    <div class="scrollerfade" style="display:none;">This div shows up when you are scrolled down, and should disappear when you scroll back to top<br/>click the green content box to toggle its height (no longer needs scrolling)</div>
    <div class="content">scroll down to see the red box</div>
</div>
  

js:

 var $fade = $('.scrollerfade');
$(window).on('scroll', function () {
    $fade.toggle(($(window).scrollTop() > 0));
});
$('.content').on('click',function(){
    $(this).height(($(this).height()>200)?200:2000);
});
  

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

1. IE10 и FF работают так же, как Chrome, просто IE9 не запускает событие прокрутки, когда полоса прокрутки исчезает

Ответ №1:

пришлось решить это с помощью события Durandal

если у кого-то есть разрешение, в котором НЕ используется событие Durandal, это было бы лучшим ответом, я думаю, и сработало бы, даже если бы вы не использовали Durandal

 //fix for IE9, because the final scroll event is not fired when the page size changes
_i.router.on('router:navigation:composition-complete').then(function (instance, instruction, router) {
    $fade.toggle((_i.$(window).scrollTop() > 0));
});