Question

我正在使用键盘控制滚动开发单页网站。

我创建了javascript函数，动画div来创建滚动效果。

JS：

var current_page = "#first";
function animateScroll(curr, des){
    $(des).show();
    $(des).css("position", "absolute");
    $(des).css("z-index", "2");
    $(curr).css("z-index", "1");
    $(des).css("top", "100%");
    $(des).animate({
        top : "0px"
    }, 800, function(){
        $(curr).hide();
        current_page = des;
    });
}
$(document).on("keyup", function(e){
    if(e.keyCode === 40){
        animateScroll(current_page, "#" + $(current_page).next().attr("id"));
    }
});

html：

<div id = 'why_am_i_moving'></div>
<div class = 'main' id = 'first'>press down key</div>
<div class = 'main' id = 'second'></div>
<div class = 'main' id = 'third'></div>
<div class = 'main' id = 'fourth'></div>
<div class = 'main' id = 'fifth'></div>

css：

body, html{
    margin : 0px;
    padding : 0px;
    width : 100%;
    height : 100%;
    overflow : hidden;
}
div.main{
    width : 100%;
    height : 100%;
    display : none;
    background : white;
}
#first{
    background : red;
    display : block;
}
#second{
    background : blue;
}
#third{
    background : green;
}
#fourth{
    background : yellow;
}
#why_am_i_moving{
    position : absolute;
    bottom : 0;
    width : 200px;
    height : 200px;
    background : brown;
    z-index : 3;
}

有时当我在keyup上运行我的函数时，页面上的所有元素都会在开始动画之前稍微向上移动。

这只发生在firefox（38.0.5）中，并且只有在我使用向下键启动动画时才会发生。

小提琴：https://openexchangerates.org/

有人知道这里发生了什么吗？谢谢你的帮助。

Answer 1

据我所知，这是Firefox中的一个错误。按下时身体向上移动。您可以通过将position: absolute;添加到正文标记来解决此问题。

jsfiddle

firefox中的动画元素移动其他元素

1 个答案: