.scroll() 函数定位在上次更新后在谷歌浏览器中闪烁答案

【问题标题】：.scroll() function positioning flickering in google chrome after its last update.scroll() 函数定位在上次更新后在谷歌浏览器中闪烁
【发布时间】：2015-06-11 20:23:07
【问题描述】：

说实话，我有点绝望。

在我的 Google Chrome 浏览器更新后——我认为从版本 39 到 41——我的一个客户网站在 Chrome 中完全毁容了。

你可以在这里看到它： http://prinovis-media-day.com/

如果向下滚动，所有 »视差« 元素都会闪烁。 我已经在我的 macbook 上查看了第 39 版——在第 39 版中绝对没问题。

基本上，我要创建这种效果的方法非常简单：

$("window").scroll(function(){

     var move_value = Math.round(scroll_top * 0.3);
     var opacity_value = *some other value*;

     $(".parallax-container__content").css({

        'opacity': opacity_value,
        'padding-top': move_value +'px'

     });

});

有人知道怎么回事吗？在这次更新之前，它就像一个魅力......

提前非常感谢，我非常感谢任何答案！

【问题讨论】：

您总是可以将 $(".parallax-container__content") 元素缓存在一个变量中，这样它就不会在每次触发滚动事件时都检索它，这也适用于不透明度值（除非它根据 scroll_tp 动态变化。这样做可能会导致脚本加速并帮助正在发生的卡顿
仅供参考：在我的“Chrome 40.0.2214.115 m”上运行良好
您可以尝试在“.prallax-container_content”的 CSS 中添加“过渡”。 w3schools.com/css/css3_transitions.asp
当我滚动时它们会跳动，但我不认为它们会闪烁（如快速出现和消失）。在 Chrome 41.0.2272.104（64 位）、OS X 10.10.3 beta 上。
非常感谢！！！ @AdrianRoworth 我已将所有选择器放入 scroll() 函数之外的变量中……它提高了性能，但由于某种原因，错误仍然存在……（更改是实时的）还有其他想法吗？

标签： javascript jquery css google-chrome scroll

【解决方案1】：

将我的 cmets 移动为答案：

你总是可以缓存 $(".parallax-container__content") 元素在一个变量中，这样它就不会在每次滚动时都检索它事件被触发，这也适用于不透明度值（除非根据 scroll_tp 动态变化。这样做可能会导致加速和帮助正在发生的卡顿的脚本

如果它仍然很明显，那么您可以使用特征检测检测浏览器和用户是否支持 CSS 转换 'transform: translate' 而不是改变 'top' 值。如果是不支持，然后恢复到更改“顶部”。改变 'top' 会导致浏览器重绘，而 'translate' 不会。这种重绘对浏览器来说非常昂贵，并且可能导致卡顿某些机器。 modernizr.com 可以帮助您解决功能检测，但它可能只是为了帮助这种情况。

看看这个检测支持的某些样式：http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/

这是最简单的检查方法（记住要考虑供应商前缀）。

【讨论】：