jquery - Chrome : weird scroll bar only during certain transition effects

Question

我正在使用 jquery 对我的全屏背景图像应用以下效果:

function moveDown(){
    $('body').find('img').delay($delay*1000).animate({top: "+="+$distance}, $seconds*1000,'swing')
}
function zoomOut(){
    $('body').find('img').css({"transition":"all 6s linear","transform":"scale(1)"});
}
function zoomIn(){
    $('body').find('img').delay($delay*1000).animate(obj,6500,'linear');
}

这很好用，但只有第二个函数 zoomOut() 我在 Chrome 中遇到了问题。在执行转换时，我在正常滚动条旁边看到一个奇怪的滚动条，这个滚动条只在转换进行时显示。正如你在这张图片上看到的

在转换之后它又消失了，在转换过程中它又出现了？？

有人对如何摆脱第二个滚动条有任何想法吗？

Answer 1

首先我会怀疑这里有两件事。

您正在为 moveDown 和 zoomIn 使用基于 javascript 的动画，但随后在 zoomOut 上设置 CSS 动画值。尽量与您的动画保持一致，并尽可能使用 CSS 动画，因为与 javascript 动画相比，它们的性能更好(使用硬件加速等)。

当您设置该 CSS 过渡值时，当您的另一个动画触发时它不会被“取消应用”，这意味着在 moveDown 或 zoomIn 中完成的每个增量更改都会应用六秒的过渡。

如果你想要一个快速而肮脏的修复，你可以将以下 block 放在 zoomIn 和 moveDown 中:

$('body img').css({'transition':'none', 'transform':'none'});

但理想情况下，您会将所有这些 CSS 转换包装在一个类中，然后通过 JavaScript 应用该类。

只是我的 2¢