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

我试图得到一个div从100%不透明度到0%不透明度的滚动

我做了这个，它在网络浏览器中工作得很好，就像我希望的那样。它也适用于移动浏览器，但有一个可怕的缺点

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

（小提琴中出现的情况是，当你滚动时，顶部的div将变为不透明度：0，显示它下面的另一个div，具有相同的背景图像，但模糊。创建相同图像的印象滚动越多越模糊）

在web浏览器中，当您滚动时，div会逐渐降低不透明度，并产生类似淡入淡出的效果，这非常好

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

有解决办法吗？我曾尝试在css中添加滚动触控功能，但没有什么不同

 -webkit-overflow-scrolling: touch

---

移动设备上的滚动距离与桌面上的滚动距离非常不同。即使你检测到触摸事件中的每一步，这也只是事实的一半。当用户释放时，站点将继续滚动一段时间，同时取消加速。这被称为动量滚动，在大多数情况下，触摸事件不会拾取它

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

滚动库 有一些库可以帮助您解决此问题。例如，一个名为“模拟滚动”的应用程序可以更加一致地工作

可滚动性为您的应用程序添加了对iOS本机滚动的良好模仿 移动网络应用

Scrollability是一个单独的脚本，它很小，并且没有外部接口 依赖关系。把它放到你的页面中，添加一些CSS类到 可滚动的元素，然后滚动离开

完全忽略滚动条 不要查看触摸或滚动事件。而是使用

setInterval

或

requestAnimationFrame

以所需频率随时报告页面当前位置（

document.documentElement.scrollTop

）。将动画基于此值，而不是滚动或触摸事件。您可能希望将此限制为触摸设备，因为桌面不需要它

编写自己的滚动功能 禁用滚动，并使您自己的，例如没有动量滚动，这是适合您的需要。请注意，如果禁用滚动，则桌面上通常会禁用

滚动

事件，但

鼠标滚轮

起作用。我一直在走这条路，我不会推荐它。相反，您可能应该在顶部使用库方法