背景附件：固定不适合100％的身高

Question

在此站点https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax中尝试代码

当前，视差滚动不起作用。 如果我删除 new CommonsChunkPlugin({ "minChunks":function(module,count) { return module.resource & /my-bundle1//.test(module.resource) && count>=2; }, "async":"mybundle1-1.0.0" }), ... ，则视差效果有效。 为什么？

已更新：适用于Safari 11，但不适用于Chrome，两者均适用于台式机。无法弄清

body height:100vh

Answer 1

值得注意的是，并非所有浏览器都支持vh或vw –查看受支持的here。视差效果也不总是在使用Safari的iOS移动设备上起作用。

要解决此问题，以便仍可以看到背景图像，可以执行以下操作：

.my-parallax-element {
   ...
   background-attachment: fixed;
   ...
}

@supports (-webkit-overflow-scrolling: touch) {

        .my-parallax-element {
            background-attachment: scroll;
        }
    }

这将仅针对iPad和iPhone。