Question

示例
首先，这是我的代码和问题：
http://www.nathanstpierre.com/MBX/showoff.html

问题
所以我看到的是当您单击左侧的按钮时，窗口会滚动到相应的标题。在每个浏览器中，但Firefox（包括... IE gasp ）这是非常顺利的。但是，如果减小窗口的高度，它将在所有计算机上变得平滑。我已经在多台计算机和IE 7-8，谷歌浏览器，Safari和Firefox 3.5上试过了这个。我已经消除了页面上的所有图形和颜色，所以这些都不是问题。我已经摆脱了跟随你的侧边栏，那不是它。

理论
我认为jQuery缓动插件会计算你需要去的距离，然后将每个指定持续时间内需要移动的像素数除以（比如300像素超过30毫秒，所以10px / ms）。每个其他浏览器似乎都能够实现平滑过渡，但是窗口滚动事件提供的粒度可能不足以让Firefox显得流畅吗？或者我可能正在使用错误的缓动插件或错误的设置。

代码

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

THE LOGIC

为sidenav onClick上的每个标记添加一个事件监听器。这将获得文档中元素的offset（）。顶部，其ID与该链接的href属性相同，然后从当前scrollTop动画到该元素的offset（）。top。逻辑是合理的，并且在每个浏览器中都能顺利运行，除了Firefox ......据我所知。

THE PLEA

我做错了什么？这是一个错误吗？

谢谢！

最新消息

好吧，我不能凭良心选择这里提出的任何答案，因为他们都没有真正解决这个问题，所以如果你跟着这个选择你的最爱和赏金会去一个投票率最高。

问题似乎是Firefox a）呈现透明度和b）处理滚动事件的方式。可能具有足够的处理器能力这是一个没有问题，但令我难过的是IE（所有浏览器）能够在劣质硬件上呈现这一点。我将向Mozilla提出这个问题，看看他们是否有任何关于它的话题。

如需额外的启发，则免费提供以下内容：

With Transparency
Without Transparency

编辑：所以问题已得到解答，但现在我无法选择。任何人都知道这是怎么回事？

最终更新 足够的时间过去他们让我得到了赏金，所以我选择了正确的答案。看起来像box-shadow和一些其他效果会导致firefox中的一些滚动问题，因为它们呈现的方式。 FF 4.0 +处理得更好，但有些计算机仍有问题。对于实现CSS3的人来说，这是一个很好的选择：在所有浏览器上测试交互，看看性能成本是否合理。

Answer 1

性能不佳似乎是由-moz-box-shadow属性引起的，如果删除此属性的任何声明（或使用Firebug禁用它们），滚动动画会更加平滑。

Answer 2

请尝试jQuery 1.4。这看起来要快得多，然后是jQuery 1.3.2。

如果你需要调试这些东西，可以将未压缩的js文件放在你的代码中，并使用Firebug和它的配置文件来分析这些功能。

Answer 3

你的页面有两个背景（一个是透明的.png ..）

有点沉重

问题在于firefox和/或机器处理动画。检查Firefox的平滑滚动选项（工具 - ＆gt;选项 - ＆gt;高级 - ＆gt;常规 - ＆gt;使用平滑滚动）。这可能是它被检查的原因......

Answer 4

每当我尝试使用ScrollTo的类似效果时。也许这会有所帮助

ScrollTo Plugin

Answer 5

我遇到了与FF 3.5相同的问题 - 看起来确实像渲染问题。如果你尝试新的3.6它可能会好的。

我遇到了doherty的coda slider 2.0 btw的问题。

此致

的Andrej

jQuery简化了Firefox中窗口滚动的动画（bug还是我的坏？）

5 个答案: