.scroll(）函数在上次更新后在谷歌chrome中定位闪烁

.scroll() function positioning flickering in google chrome after its last update

本文关键字：chrome 谷歌 闪烁 定位 函数 scroll 更新      更新时间：2023-09-26

说实话，我有点绝望。

在我的谷歌Chrome浏览器更新后——我认为版本从39到41——我的一个客户网站在Chrome中完全被破坏了。

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

如果向下滚动，所有»视差«元素都会闪烁我已经在39版的macbook上检查过了——在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'
     });
});

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

提前谢谢你，我真的很感激你的回答！

移动我的评论作为答案：

您可以始终缓存$（".aparalax-container__content"）元素在变量中，这样它就不会在每次滚动时检索它事件被激发，这也适用于不透明度值（除非根据scroll_tp动态变化。这样做可能会导致加快并帮助正在发生的的jank的脚本

如果它仍然很明显，那么你可以使用特征检测检测浏览器和用户是否支持CSS转换"transform:translate"，而不是更改"top"值。如果是不受支持，然后恢复为更改"top"。更改"top"导致在浏览器中重新绘制，而"translate"则不会。这种重新绘制对浏览器来说相当昂贵，并且可能导致jank某些机器。modernizr.com可以通过功能帮助您检测，但仅仅在这种情况。

看看这一点，以检测支持的十六烷类：http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/

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

相关文章：