gpt4 book ai didi

javascript - 当我两次加载页面时,滚动可视化仅同步到文本

转载 作者:行者123 更新时间:2023-11-30 15:11:18 26 4
gpt4 key购买 nike

我不确定为什么会这样,但我创建了一个滚动可视化 (https://jhjanicki.github.io/hongmutrade_v2/),其中文本应与视觉同步,更具体地说,对于可视化的后半部分,力图应与“红木有保护吗?”并且中国 map 要同步“需求国和过境国”等。

我将一个类“部分”分配给我希望显示特定可视化的文本。我将这些高度存储到一个数组中,如下所示:(来自Trigger event when user scroll to specific element - with jQuery)

  var topArray = [];
$(".section").each(function () {
var hT = $(this).offset().top;
var hH = $(this).outerHeight();
var wH = $(window).height();
topArray.push(hT+hH-wH);
});

当用户滚动到目标时,它会触发特定的可视化效果。

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-pages 时,我第一次加载它时,可视化不同步,它们向前移动得太快,但如果我单击刷新,它们就会同步。我很困惑为什么会这样。
我已经在两台不同的电脑上测试过它,每台电脑都有两个不同的浏览器(Chrome 和 Firefox)。它在本地也有同样的问题。

任何帮助将不胜感激

例如,如果我添加此代码以强制页面重新加载一次,那么它会起作用:

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

最佳答案

您的脚本在 DOM 完全加载之前执行,因此像 $(window).height() 这样的措施或 window.innerHeight不正确。

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

解决方法:

将您的脚本(index.html 底部的脚本)包装在 jQuery ready function's callback

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

此外,移动所有 <script><head>之外, 并将它们放在您的脚本之上。

关于javascript - 当我两次加载页面时,滚动可视化仅同步到文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45074885/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com