0

我有一个简单的脚本，可以在滚动时滑动某些块。它似乎在除 IE 之外的所有浏览器上都能正常工作，我不知道为什么。我使用 babel 将代码编译到 ECMA5 希望它会有所帮助，但它不会。

这是JS

function slideIn(e) {
    sliderImages.forEach(function (sliderImage) {
        var slideInAt = window.scrollY + window.innerHeight;
        var imageBottom = sliderImage.offsetTop + sliderImage.offsetHeight;
        var isHalfShown = slideInAt > sliderImage.offsetTop;
        var isNotScrolledPast = window.scrollY < imageBottom;
        if (isHalfShown && isNotScrolledPast) {
            sliderImage.classList.add('visible');
        } else {
            sliderImage.classList.remove('visible');
        }
    });
}

如果有人遇到过类似的问题并且知道它可能与此有关，将不胜感激！

4

1 回答 1

0

问题是为什么幻灯片在 IE 中没有滑入和滑出，但在其他一些浏览器上却可以。

正如@Carlos1232 所评论的那样，给出的代码使用了 classList 并且在 IE 上不可用（或至少不完全可用）。这可能是查看给定代码的唯一 IE 问题。

您可以替换这些行：

sliderImage.classList.add('visible');

sliderImage.classList.remove('visible');

和

add(sliderImage,'visible');

remove(sliderImage,'visible');

如果你添加下面的两个函数。他们检查 classList 是否在浏览器中实现，如果不是，他们会获取 className（在 IE>=9 上可以）并解析它包含的字符串以添加/删除所需的类。

function add(element,cl) {
  if (element.classList) {
    element.classList.add(cl);
  }
  else {
    if (element.className.split(" ").indexOf(cl) == -1) {
      element.className += " " + cl;
    }
  }
}

function remove(element,cl) {
  if (element.classList) {
    element.classList.remove(cl);
  }
  else {
    element.className = element.className.replace(/\bcl\b/g, "");
  }
}
于 2020-09-17T16:53:56.440 回答