火狐浏览器jquery scrollTo闪烁错误 [英] Firefox jquery scrollTo flicker bug

问题描述

我在这里看到了很多关于Firefox闪烁的帖子，但没有一个能够描述我遇到的问题。

我有一个水平滚动网站，固定位置菜单和jquery插件.scrollTo处理下一个和上一个按钮。这在Chrome和Safari浏览器（不知道IE浏览器）方面效果很好，但是在Firefox中，每当你用右上角的箭头向左滚动时，就会闪烁。

在此处查看示例

我试过设置所有有固定位置的元素溢出：auto，但是什么也没做。我不是很熟悉JS或Jquery，但我知道足以改变事情。任何帮助将不胜感激！

解决方案

问题在于，您没有取消点击功能中的默认浏览器操作。改变你的代码，闪烁将消失：

$ $ $ $ $ $ $单击（函数（e）{
$ .scrollTo（'+ = 1000px'，600）;
e.preventDefault（）;
}）;
$（。prev）。click（function（e）{
$ .scrollTo（' - = 1000px'，600）;
e.preventDefault（）;
}）;
}）;

Firefox试图滚动到＃和动画在同一时间。

I've seen quite a few threads here talking about flickering in Firefox, but none that quite describe the problem I'm having.

I've got a horizontal scrolling website, fixed position menus, and the jquery plugin .scrollTo handling next and previous buttons. This works great in Chrome and Safari (don't know about IE), but in Firefox there is a flicker every time you scroll right of left with the arrows in the upper right and corner.

See An Example Here

I've tried setting all the elements that have a fixed position to overflow:auto but that did nothing. I'm not super familiar with with JS or Jquery but I know enough to change things. Any help would be greatly appreciated!

解决方案

The problem is that you are not cancelling the default browser action in your click function. Change your code to this, and the flicker will go away:

$(function(){
    $(".next").click(function(e) {
        $.scrollTo( '+=1000px', 600 );
        e.preventDefault();
    });
    $(".prev").click(function(e) {
        $.scrollTo( '-=1000px', 600 );
        e.preventDefault();
    });
});

Firefox is trying to "scroll to the #" and animate at the same time.

这篇关于火狐浏览器jquery scrollTo闪烁错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！