Question

我的网站上有基本的视差效果。但是，它非常不稳定，我不确定为什么。我的代码如下。

function parallax(){
  var $parallax = $('.parallax');
  var $scrollPos = window.scrollY;

  $parallax.css('transform', 'translateY(' + -($scrollPos * 0.3) + 'px)');
}

$window.scroll(function(){
  //Check for mobile
  if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
    // You are in mobile browser
    requestAnimationFrame(parallax);
  }
}

Answer 1

您应该在滚动事件之外移动用户代理检查。现在，只要用户滚动浏览器，您就会执行数百次未编译的正则表达式。

// cache the result of the user agent test
var isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent);

$window.scroll(function(){
  if (!isMobile) {
    requestAnimationFrame(parallax);
  }
}

此外，通常建议您不要进行用户代理检查，因为它们非常脆弱;用户代理字符串可以被欺骗，新的浏览器被释放等。相反，您应该使用特征检测，或者只是使用CSS设计者对媒体查询执行的操作并检查屏幕的宽度。如果屏幕太窄，请假设您处于不应该进行旁视的小屏幕上。

var parallaxEnabled = false;

// only update the variable if the browser resizes (fires when device changes orientations too)
$window.resize(function() {
    // enable parallax if greater than 720 pixels (ipad portrait)
    parallaxEnabled = document.width > 720;
});

$window.scroll(function() {
  if (parallaxEnabled) {
    requestAnimationFrame(parallax);
  }
});

视差不稳定

1 个答案: