Javascript 当我加载两次页面时，滚动可视化只同步到文本

我不确定为什么会发生这种情况，但我创建了一个滚动可视化（）文本应与视觉同步，更具体地说，在可视化的后半部分，力图应与“红木物种是否受到保护？”同步，中国地图应与“需求国和过境国”同步，等等

我将一个类“section”指定给我希望显示特定viz的文本。我将这些高度存储到一个数组中，如下所示： （来自）

当用户滚动到目标时，它会触发某些可视化显示

if (scrollTop > topArray[1]){
             d3.selectAll(".stat2")
                    .transition()
                    .duration(100)
                    .style('opacity',0);
             d3.selectAll(".stat3")
                    .transition()
                    .duration(100)
                    .style('opacity',1);

       }else{
            d3.selectAll(".stat3")
                    .transition()
                    .duration(100)
                    .style('opacity',0);

       }

当我在github上创建一个分支gh页面时，第一次加载它时，可视化不同步，它们向前移动得太快，但是如果我单击“刷新”，它们就会同步。我很困惑为什么会发生这种情况。
我已经在两台不同的电脑上测试了它，每台电脑都有两种不同的浏览器（Chrome和Firefox）。它在本地也有同样的问题

任何帮助都将不胜感激

例如，如果我添加此代码以强制页面重新加载一次，则它将正常工作：

window.onload = function(){
  if(!window.location.hash){
   window.location = window.location + '#loaded';
   window.location.reload();
  }
} 

---

您的脚本在DOM完全加载之前执行，因此像

$（window）.height（）

或

window.innerHeight

这样的度量值是不正确的

代码在页面重新加载时起作用的原因是，当您重新加载页面时，浏览器缓存中的样式和web字体等资源已经可用，因此当脚本运行时，页面的DOM已经完全加载

解决方案：

将脚本（位于

index.html

底部的脚本）包装到

另外，将所有的

移到

之外，并将它们放在脚本的正上方

window.onload = function(){
  if(!window.location.hash){
   window.location = window.location + '#loaded';
   window.location.reload();
  }
} 

$(function() {
// move code here
})