Javascript 不适用于 Internet Explorer，但适用于所有其他浏览器。为什么？

Question

下面的 Javascript（当另一个元素滚动到视图中时触发元素的分页背景色）在 Internet Explorer 中不起作用，但在所有其他浏览器中都起作用。有人知道为什么吗？

代码基础也有我笔下的：https://codepen.io/headstarterz/pen/PMdZdV/

<script>
function inViewport(element) {
  // Get the elements position relative to the viewport

  var bb = element.getBoundingClientRect();

 // Check if the element is outside the viewport
 // Then invert the returned value because you want to know the opposite

return !(bb.top > innerHeight || bb.bottom < 0);
}

var project1 = document.querySelector(".project-trigger1");
var project2 = document.querySelector(".project-trigger2");
var project3 = document.querySelector(".project-trigger3");

var pagination1 = document.querySelector(".bullet1");
var pagination2 = document.querySelector(".bullet2");
var pagination3 = document.querySelector(".bullet3");

// Listen for the scroll event

document.addEventListener("scroll", event => {
  // Check the viewport status

  if (inViewport(project1)) {
    pagination1.style.background = "#e3e3e3";
  } else {
    pagination1.style.background = "transparent";
  }
});

document.addEventListener("scroll", event => {
  // Check the viewport status

  if (inViewport(project2)) {
    pagination2.style.background = "#e3e3e3";
  } else {
    pagination2.style.background = "transparent";
  }
});

document.addEventListener("scroll", event => {
  // Check the viewport status

  if (inViewport(project3)) {
    pagination3.style.background = "#e3e3e3";
  } else {
    pagination3.style.background = "transparent";
  }
});

</script>

脚本适用于 Chrome、Safari、Firefox、Edge

脚本在 Internet Explorer 11 中不起作用

Answer 1

大概有两个原因：

首先，您的结束 <script> 标签拼写错误 (<skript>)。

此外，您正在使用 'fat arrow functions'，这是 ES6 的一项功能。我会研究像 Babel 这样的东西来将你的代码转换成 I.E.友好的语法

Javascript 不适用于 Internet Explorer，但适用于所有其他浏览器。为什么？

Javascript doesn't work in Internet Explorer but in all other browsers. Why?

javascript

internet-explorer

scroll

viewport