图像中出现白色补丁，网站无法滚动到全长，skrollr js 移动视差问题

Question

以下所有问题都是在通过手机访问时出现的。

我为我的一位客户使用了 skrollr js。共有 4 个视差部分。前两张图片效果很好，但第三张有点空白，最后一张有时几乎是半空白（白色补丁）。

伴随这个问题，网站无法滚动到全长。

详细说明：

img1 : 白色补丁可见。而且不是一成不变的，有时会出现完整的图像，有时不会

img2: 网站无法滚动到显示部分下方。

我正在使用的 Javascript 是：

var s = skrollr.init({
    edgeStrategy: 'set',
    smoothScrolling: false,
    mobileDeceleration: 0.004,
    forceHeight: false

  });

  skrollr.menu.init(s, {
    change: function(hash, top) {
    console.log(hash, top);
  },
    updateUrl: false,
    animate: true,
    easing: 'sqrt',
    duration: function(currentTop, targetTop) {
      return 500;

    },      
  });

Answer 1

我不确定这是否能解决您的问题，但开发人员工具告诉我您的元视口有误。

您应该使用逗号而不是分号；

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Answer 2

经过大量搜索后，我找到了一个 link，这让我接近了我所缺少的东西。

Scrolling height bug using skrollr.js on safari ios7

上面的 link 帮助我明白我应该在里面写我的 skrollr 初始化代码：

$(window).load(function() { });

而不是

$(document).ready(function() { });

这解决了我的两个问题。

谢谢。

图像中出现白色补丁，网站无法滚动到全长，skrollr js 移动视差问题

White patches appear in the image, and website does not scroll to its full length, skrollr js mobile parallax issue

html

css

wordpress

skrollr