使用 .animate .scrollTop() 滚动时，Opera 中的屏幕闪烁答案

【问题标题】：Screen flickering in opera when scrolling with .animate .scrollTop()使用 .animate .scrollTop() 滚动时，Opera 中的屏幕闪烁
【发布时间】：2012-05-12 20:34:31
【问题描述】：

这是我正在开发的网站： http://kognitek.nazwa.pl/stockize/mak/MMprodukcja/parallaxProject/stronaTestowa/test.html

网站在 使用箭头键向下滚动 时闪烁。这是我用于滚动的代码：

//bottom of index.html
else if ($.browser.opera) {

    $(function() {
        $('html').on('keydown', function(event) {
            var keypressed = event.keyCode;
            var curScroll = $('html').scrollTop();
            var keys = scrollKeys.length;
            var moved = false;
            console.log("keypressed: " + keypressed);
            for (i = 0; i < keys; i++) {
                console.log("curScroll: " + curScroll)
                if (moved === false) {
                    if (keypressed === 40 && i != (keys - 1) && parseInt(scrollKeys[i]) <= curScroll && parseInt(scrollKeys[i + 1]) > curScroll) {
                        $('html').animate({
                            scrollTop : (parseInt(scrollKeys[i + 1]))
                        }, 'slow', function() {});
                        console.log('down');
                        moved = true;
                    } else if (keypressed === 38 && i != 0 && parseInt(scrollKeys[i]) >= curScroll && parseInt(scrollKeys[i - 1]) < curScroll) {
                        $('html').animate({
                            scrollTop : (parseInt(scrollKeys[i - 1]))
                        }, 'fast', function(){});
                        console.log('up');
                        moved = true;
                    }
                }
            }
        });
    });

}

我已经花了一些时间试图解决这个问题，但仍然找不到导致这种行为的原因。网站在 Chrome、Firefox、IE8、IE9 中运行良好。问题仅出现在 Opera 中。我知道我在 index.html 的末尾得到了这部分代码 x3，一旦找到解决方案就会优化它。

知道这里有什么问题吗？

编辑：

我创建了这个小提琴：http://jsfiddle.net/mymlyn/Mr5vR/ 起初，脚本似乎很好，但是当你到达底部并尝试再次向上时，屏幕开始闪烁

编辑2：

我认为它可以防止默认问题，解决这个问题

EditX：

我希望我没有编辑此文件失败，因此它没有成为社区 wiki...无论如何我升级了代码并在此处提供： http://cssdeck.com/labs/swayiqbq/2 它使用将从 jquery 1.9 中删除的 .browser。

【问题讨论】：

脚本不应该是 onkeypress 而不是 onkeyup 吗？

标签： javascript jquery opera parallax

【解决方案1】：

添加了一些代码以防止在 Opera 中出现默认行为：

    $(document).keydown(function(e){
    var code = e.keyCode ? e.keyCode : e.which;
    if(code === 40 || code === 38){
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
});

效果可以看这里： http://kognitek.nazwa.pl/stockize/mak/MMprodukcja/parallaxProject/stronaTestowa/test_all.html

它可以向下/向上滚动，并且可以正常工作！

要优化它，并在几天内使它成为一个 sn-p :)

【讨论】：