Question

我写了一个简单的自定义部分对齐脚本，在chrome和safari中运行得很好，但是在firefox中没有任何反应...

它是做什么的：

当滚动停止时，它会检查每个部分的方向和位置...如果部分的顶部在某个范围内，则可以转到页面顶部或底部。（还会检查滚动方向）。此外，它考虑了固定标题的高度。就像我说的在Chrome和Safari中工作。任何想法有什么不对？

$( document ).ready(function() {
    var animating = false;
    var mainHeader = $('#main-header');

    var items = $("section");
    var lastOffset = 0;
    var scrollDir = 'none';


    $(window).scroll(function() {
        var windowHeight = $(this).height();
        var currOffset = $(this).scrollTop();
        var headerHeight = mainHeader.outerHeight();

        if (currOffset > lastOffset) {
            scrollDir = 'down';
        } else {
            scrollDir = 'up';
        }
        lastOffset = currOffset;



        clearTimeout($.data(this, 'scrollTimer'));
        if (!animating) {
            $.data(this, 'scrollTimer', setTimeout(function() {
                items.each(function(key, value) {
                        var currentItem = $(value);
                        var sectionOffset = currentItem.offset().top;
                        var sectionDist = sectionOffset - currOffset;
                    if ( scrollDir === 'up' && sectionDist > windowHeight*0.15 && sectionDist < windowHeight ) {
                        animating = true;
                        $('body').animate( { scrollTop: sectionOffset-windowHeight + 'px' }, 250);
                        setTimeout(function() { animating = false; }, 300);
                        return false;
                    }
                    else if ( scrollDir === 'down' && sectionDist < windowHeight*0.85 && sectionDist > 0 ) {
                        animating = true;
                        $('body').animate( { scrollTop: sectionOffset-headerHeight + 'px' }, 250);
                        setTimeout(function() { animating = false; }, 300);
                        return false;
                    }
              });
            }, 200));
        }
    });
});

Answer 1

在这里找到答案...... Animate scrollTop not working in firefox

Firefox将溢出放在html级别，除非特别设计为表现不同。

要在Firefox中使用它，请使用

$('body,html').animate( ... );

部分对齐窗口（firefox问题）

1 个答案: