JQuery scroll() / scrollTop() 在 IE 或 Firefox 中不起作用

Question

下面的脚本显示了从屏幕顶部到向上箭头的虚线，其位置取决于用户向下滚动页面的距离，以便他们可以单击箭头滚动回顶部。这在 Chrome 中效果很好，但在 IE 或 Firefox 中根本不起作用，即虚线不会增长，箭头也不会在滚动时向下移动。

有人知道这是为什么吗？

HTML：

<div id="dotted-line">
    <div id="up-arrow">^up</div>
</div>

JS：

$(window).scroll(function(){
    if ($(window).scrollTop() > 10) {
        var pos = $('body').scrollTop();
        $('#dotted-line').css('height',pos/4);
        $('#up-arrow').css('top',pos/4);
    } else {
        $('#dotted-line').css('height','6px');
        $('#up-arrow').css('top','-150px');
    }
});

附：我试过JSFiddle，但我认为你不能滚动，因此我无法演示。

Answer 1

Chrome 使用body 滚动，IE/Firefox 使用html 滚动。我个人认为html 更有意义，但这就像我的观点，伙计。

在尝试使用滚动执行操作时使用 'html,body' 作为选择器 - 这包括在您的 $(...).scrollTop() > 10 检查中。

为避免每次都重新评估选择器，请考虑包装代码：

(function(undefined) {
    var container = $("html,body");
    $.windowScrollTop = function(newval) {
        if( newval === undefined) {
            return container.scrollTop();
        }
        else {
            return container.scrollTop(newval);
        }
    }
})();
// call $.windowScrollTop() to get position
// call $.windowScrollTop(100) to set position to 100

请注意，我不确定“检查未定义并单独调用”位的必要性。我不确定 jQuery 会如何对被逐字传递 undefined 作为参数做出反应，所以我玩得很安全。