Material Design Lite上的视差滚动不起作用？

Question

视差滚动背景似乎不适用于Material Design Lite。或者我做错了。

这是我的问题： https://i.imgur.com/6YbSkm5.png

中间巨大的空白没有显示背景图像或背景：我在HiDPI屏幕上测试时给出了它。但是，它适用于其他屏幕尺寸，如MDPI和较小屏幕尺寸（至少根据Chrome）。我尝试使用单独的.parallax类，其中包含以下内容：

.parallax{
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

但这不起作用，也不适用于图片中的代码。

我正在使用Material Design Lite框架，我认为这是导致问题的原因。当我进入Inspect Element视图并在.mdl-layout类上删除display：flex和display：webkit-flex时，它似乎可以工作。

Answer 1

由于MDL中的css溢出设置问题，paralax不起作用。

有两种方法可以修复它： 1.更改MDL css中的溢出设置 2.使用类.mdl-layout__content

映射站点/滚动div的高度

例如滚动事件：

  $('.mdl-layout__content').on('scroll', function () {

Answer 2

尝试在material.css文件中注释如下。

.mdl-layout__container {
  /* position: absolute;*/
  width: 100%;
  height: 100%; }

这可能导致非固定标题和抽屉， 所以我们必须解决这个问题。 ：）