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

Question

我试图在滚动时将div从100％不透明度变为0％不透明度。

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

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

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

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

滚动库

有些库可以帮助您解决此问题。例如，一个名为scrollability的模拟滚动以更一致地工作。

  

Scrollability可以很好地模仿iOS原生滚动到你的   移动网络应用。

     

可滚动性是一个单一的脚本，它很小，而且没有外部   依赖。将其放入您的页面，添加一些CSS类   可滚动的元素，然后滚动。

完全忽略滚动

请勿查看触摸或滚动事件。而是使用requestAnimationFrame或document.documentElement.scrollTop所需的频率，始终报告网页当前位置（scroll）。将动画基于此值而不是滚动或触摸事件。您可能希望将此限制为触摸设备，因为桌面不需要它。

编写自己的滚动功能

禁用滚动并制作适合您需要的动态滚动。请注意，如果禁用滚动，则mousewheel事件通常会在桌面上禁用，但<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 有效。我一直沿着这条路走下去，我不推荐它。相反，你可能应该采用顶部的图书馆方法。