Javascript 旋转卷轴上的一个元素，最轻的方式是什么？

在我实习期间制作的一个网站上，我想制作一个箭头，一旦用户向下滚动，箭头就会变平。我曾尝试使用jQuery实现这一点，但这对浏览器来说似乎非常沉重

对于这个函数，我使用了.scroll（）函数和一个计算，当用户向下滚动时，箭头（三角形）会变平：

$(window).scroll(function(e){
     triangleRotation = 5.6125 - ($(window).scrollTop() / ($(window).height() / 7.3));
       if (triangleRotation <= 0) {
        triangleRotation = 0;
       }
       $('.triangle-left').css({'transform': 'rotate(' + triangleRotation + 'deg)', '-webkit-transform': 'rotate(' + triangleRotation + 'deg)', '-moz-transform': 'rotate(' + triangleRotation + 'deg)'});
       $('.triangle-right').css({'transform': 'rotate(-' + triangleRotation + 'deg)', '-webkit-transform': 'rotate(-' + triangleRotation + 'deg)', '-moz-transform': 'rotate(-' + triangleRotation + 'deg)'});
});

$（窗口）。滚动（功能（e）{
三角形旋转=5.6125-（$（窗口）.scrollTop（）/（$（窗口）.height（）/7.3））；
如果（三角形旋转，您可以尝试：


创建一个全局可访问变量“is_scrolling”，并在scroll事件中将其设置为true（如果不是true）
如果用户停止滚动，请使用中的代码将变量设置为false
使用setTimeout旋转。您可以使用超时时间和每步度数管理速度（如果旋转与滚动位置无关），否则使用您的计算

优点是，这与滚动事件是解耦的。您无法控制滚动事件的触发频率，但可以控制setTimeout中函数的触发。
我建议始终使用css转换，因为这只会触发绘制，而不会触发回流或布局。-此外，请确保在屏幕上使用“节流”
onscroll
事件函数。它是通过css转换完成的，我只是发布了源代码，可能不会在每次启动滚动事件时计算
$（window.height（）/7.3
。-但是，我应该如何旋转三角形（如果用户停止滚动，就让旋转停止）另一个建议，“缓存”在scroll函数之外的变量中的三角形对象。您的代码当前会旋转scroll上的三角形，当用户停止滚动时，旋转也会停止。。。