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

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;
  }
 }