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

P.S。我试过做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作为参数作出反应，所以我正在安全地玩它。

JQuery scroll（）/ scrollTop（）无法在IE或Firefox中运行

1 个答案: