移动浏览器中的.scroll功能问题

Question

我正在尝试使div在滚动时从100％不透明度变为0％不透明度。

正如我希望的那样，我制作了这把小提琴，并且在网络浏览器中也很好用。 它也可以在移动浏览器中使用，但缺点是可怕的。

var divs = $('.cover_image');
$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  divs.css({
    'opacity': (1 - st / 40)
  });
});

（小提琴中发生的事情是，当您滚动时，顶部div将变为不透明度：0，在其下方显示具有相同背景图像但又模糊的另一个div。创建印象越多，滚动相同的图像就越模糊）

在网络浏览器中，滚动时，div逐渐变得不透明，并带有类似淡入淡出的效果，效果非常好。

但是，在移动浏览器中，只有从屏幕上松开手指后，不透明度的更改才会生效。 因此不存在渐进性变化。 仅当您从屏幕上松开手指时才进行视觉更改，而不是滚动时。

有解决方案吗？ 我尝试将滚动触摸添加到CSS中，但这没有什么不同。

 -webkit-overflow-scrolling: touch

Answer 1

移动设备上的滚动距离与台式机完全不同。 即使您检测到触摸事件中的每个步骤，也仅是事实的一半。 当用户释放时，网站将在减速的同时继续滚动一点。 这称为动量滚动，并且在大多数情况下不会被触摸事件拾取。

据我所知，没有完美的解决方案，因为不同的设备处理滚动和触摸的方式非常不同。 但是，您可以查看一些选项。

滚动库

有一些库可以帮助您解决此问题。 例如，一种称为可滚动性的功能可模拟滚动以更一致地工作。

可滚动性为您的移动Web应用程序很好地模仿了iOS本机滚动。

可滚动性是一个脚本，很小，并且没有外部依赖性。 将其放到页面中，向可滚动元素添加一些CSS类，然后滚动。

完全忽略滚动

不要看触摸或滚动事件。 而是使用setInterval或requestAnimationFrame以所需的频率报告所有页面的当前位置（ document.documentElement.scrollTop ）。 将动画基于此值而不是滚动或触摸事件。 您可能希望将其限制为触摸设备，因为台式机不需要它。

编写自己的滚动功能

禁用滚动，并进行自己的设置（例如动量滚动），使其适合您的需求。 需要注意的是scroll事件通常在桌面上禁用如果禁用滚动，但mousewheel的作品。 我一直走这条路，我不推荐它。 相反，您可能应该使用顶部的库方法。