Question

我正在使用https://material.angularjs.org/latest/demo/virtualRepeat滚动浏览项目列表。 IOS浏览器中似乎存在一个错误，在该错误中，您可以通过overlay元素滚动重复的内容。

当我将-WebKit-transform: translateZ(0px);添加到.md-virtual-repeat-scroller时，可以完全禁止重复内容的滚动。所以我想在叠加层处于活动状态时添加此样式。（在这种情况下，叠加层是带有一些结果的搜索栏。滚动浏览结果还会滚动其下的重复内容。）

.md-virtual-repeat-scroller {
    overflow-y: visible;
    &.no-scroll {
        -webkit-transform: translateZ(0px);
        color: red!important;
    }
}

Javascript：

const infiniteScrollers = document.querySelectorAll('.md-virtual-repeat-scroller');
Array.from(infiniteScrollers).forEach(element => {
    element.classList.add('no-scroll');
});

当我运行此代码时，当覆盖层处于活动状态时，文本将变为红色，但是我仍然可以滚动浏览重复的内容。

如果我手动添加样式：

.md-virtual-repeat-scroller {
    overflow-y: visible;
    -webkit-transform: translateZ(0px);
    &.no-scroll {
        color: red !important;
    }
}

为什么这个-WebKit-transform: translateZ(0px);通过Javascript添加时不起作用，但是当我直接在CSS中实现时却起作用了？

Answer 1

我不知道为什么，但是在其中覆盖了overflow-y: visible;：

.md-virtual-repeat-scroller {
    overflow-y: visible;
    &.no-scroll {
        -webkit-transform: translateZ(0px);
    }
 }

在.no-scroll中：

.md-virtual-repeat-scroller {
    overflow-y: visible;
    &.no-scroll {
        -webkit-transform: translateZ(0px);
        overflow-y: hidden;
    }
 }

解决此问题。我不知道为什么直接添加转换会起作用，但是通过Javascript添加CSS时，我必须重写overflow-y。我要离开这个问题，也许有人遇到同样的问题。

Answer 2

您必须使用浏览器兼容性来支持所有浏览器。

.md-virtual-repeat-scroller {
   overflow-y: visible;
  -webkit-transform: translateZ(0px);
  -ms-transform: translateZ(0px);
  transform: translateZ(0px);
  &.no-scroll {
    color: red !important;
  }
 }

Javascript添加的样式在IOS中不起作用

2 个答案: