javascript - 通过Chrome中的脚本(而不是IE9)更改div的大小时触发滚动事件

小提琴:http://jsfiddle.net/Xc3ud/4/

在Chrome中，当内容框的大小通过脚本更改时，它将调用滚动事件并摆脱滚动帮助div。

在IE9中，它不会触发此滚动事件，因此滚动助手div停留在页面上，并且不会因为页面未滚动而消失，但是由于内容已更改，它现在无法触发滚动

如何在IE9中触发更新？

我正在使用Durandal，所以这是SPA

的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);
});

最佳答案

必须通过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));
});