JS/CSS解决方案的滚动事件，与移动Safari兼容

JS/CSS Solution for on scroll events, compatible with mobile Safari

本文关键字：移动 Safari 兼容 事件 滚动 CSS 解决方案 JS      更新时间：2023-09-26

在许多web应用程序中，我经常需要一个JS和/或CSS解决方案，允许我随着用户在页面上向下/向上滚动而(增量)更改对象的CSS值。

http://codepen.io/bsley/pen/gGyhm 

function EasyPeasyParallax() {
  var scrollPos = $(document).scrollTop();
    $('.header').css({ 'opacity': 1-(Math.min(scrollPos/70,1)) });
};
$(document).ready(function() {
    $('body').bind('mousewheel', EasyPeasyParallax);
});

以上代码的问题是双重的。

  1. 它只允许我控制基于PX变量的数学，而不是相对于屏幕的高度或宽度的任何百分比。

  2. Mobile Safari不兼容

请告诉我如何在满足上述两点的情况下完成相同的工作?

要解决移动safari问题，绑定scroll事件而不是mousewheel。

$(document).ready(function() {
  $('window').bind('scroll', EasyPeasyParallax);
});

就百分比而言，您必须使用其他值自己计算它们。

function EasyPeasyParallax() {
  var scrollPos = $(document).scrollTop(),
      bodyHeight = $('body').height(),
      viewportHeight = $('window').height(),
      scrollPercentage = (scrollPos / bodyHeight) * 100;
  $('.header').css({ 'opacity': 1-(Math.min(scrollPos/70,1)) });
};

可以将.css样式内联到纯javascript中。只使用:

var nodes = document.getElementsByClass('header');
var i = 0;
for(var i = 0; i < nodes.length; i++){
   nodes[i].style.opacity = .5;
   nodes[i].style.left = someLeftVal + '%';
}

你可以计算任何你需要的百分比

关于第二点(我相信你已经知道如何解决第一个问题)…

移动浏览器(尤其是Safari)不支持真实的 'scroll'事件。它们只是在目标停止滚动后触发一次滚动事件。视图在滚动时停止渲染，所以你不能根据scrollTop动态改变"不透明性"。你需要的是一个像' isscroll '这样的库来处理滚动事件

相关文章：