Question

在我实习的网站上，我想做一个箭头，一旦用户向下滚动就会变平。我试图用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)'});
});

我还通过三角形图像尝试了这一点，并简单地展平了图像。这也很重。

有没有那么重的方法呢？

Answer 1

您可以尝试：

创建一个全局可达变量'is_scrolling'并在scroll事件中将其设置为true（如果不是）。
如果用户停止滚动

here

使用setTimeout进行旋转。您可以使用超时时间和每步的度数来管理速度（如果旋转与滚动位置无关），否则使用您的计算。

优点是，它与滚动事件分离。您无法控制滚动事件的触发频率，但可以控制您可以控制的setTimeout中的函数。

在滚动上旋转元素，最轻的方法是什么？

1 个答案: