Javascript没有'；不能在Internet Explorer中工作，但可以在所有其他浏览器中工作。为什么？

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

我的笔中还提供了代码基础：

函数inViewport（元素）{
//获取元素相对于视口的位置
var bb=element.getBoundingClientRect（）；
//检查元素是否在视口之外
//然后反转返回值，因为您想知道相反的结果
返回！（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”）；
//收听滚动事件
document.addEventListener（“滚动”，事件=>{
//检查视口状态
if（外部端口（项目1））{
pagination1.style.background=“#e3”；
}否则{
pagination1.style.background=“透明”；
}
});
document.addEventListener（“滚动”，事件=>{
//检查视口状态
如果（因维波特（项目2））{
pagination2.style.background=“#e3”；
}否则{
pagination2.style.background=“透明”；
}
});
document.addEventListener（“滚动”，事件=>{
//检查视口状态
如果（因维波特（项目3））{
分页3.style.background=“#e3”；
}否则{
分页3.style.background=“透明”；
}
});

脚本可以在Chrome、Safari、Firefox和Edge中使用

---

脚本在Internet Explorer 11中不工作可能有两个原因：

首先，您的结束标记拼写错误（

）

---

另外，您正在使用“胖箭头函数”，这是ES6的一个特性。我会研究一些类似Babel的东西，将您的代码转换为友好的语法

什么是“不工作”呢？有什么事发生吗？报告错误？你试过任何调试吗？而且它是

而不是

tl；dr i see ecma6请尝试使用您的浏览器和。使用工具，如立即查找代码问题。将“fat arrow functions”=“document.addEventListener”（“scroll”，event=>”更改为一种友好的语法=“document.addEventListener”（“scroll”，function（event）”，即可解决问题。谢谢！通过在帖子中添加代码（而不是在代码本身中；-）.我将尝试Babel…好的，我明白了。是的，我一直遇到I.E.问题，因为我用Chrome编写ES6和测试，只是为了稍后出现在您的场景中。即使您不想将Babel作为项目依赖项，一个快速的肮脏训练将是使用他们的在线R.E.P.L:在那里，您只需粘贴此代码，它将为您提供I.E.valid输出。祝你好运！已将代码转换为IE友好的语法。将“胖箭头函数”更改为“document.addEventListener”（“scroll”，function（event）”，在IE和其他浏览器中运行良好。非常感谢您的快速帮助！非常感谢您提供的提示。我肯定会将其作为项目依赖项包含在内！

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