通过document.documentElement.scrollTop 进行跳转的时候没有触发 window.onscroll 事件
来源:2-15 BOM特效开发(2)
樊拓
2022-01-21 15:39:10
点击导航栏进行跳转的时候 , 没有触发 window.onscroll事件 , 不知道是为什么 , 求大神帮忙解答
let oNav = document.getElementById('nav')
// 利用事件传播捕获 nav 中的点击事件 , 根据被点击元素的 data-n 属性 , 找到对应的跳转目标
oNav.onclick = function (event) {
let tarEle = event.target;
if (tarEle.tagName == "LI") {
// 根据点击的项的 data-n 属性找到目标盒子的 offsetTop 值
let dataN = tarEle.dataset.n;
let flagDiv = document.querySelector('div[data-n=' +dataN + ']')
// 进行跳转
document.documentElement.scrollTop = flagDiv.offsetTop;
}
}
// 实现滚动时在 nav 高亮显示楼层
// 获得所有 nav 的 li
let navLiArr = document.querySelectorAll('nav li')
// 获得所有的 div
let divArr = document.getElementsByTagName('div');
// 获得所有目标 div 的 offsetTop
let offsetTopArr = [];
for (let i= 0; i<divArr.length;i++){
offsetTopArr.push(divArr[i].offsetTop)
}
// 在末尾推入无限大 , 方便比较
offsetTopArr.push(Infinity)
// 当前楼层
let level = 0;
window.onscroll = function () {
// 当前的滚动
let scrolled = window.scrollY;
//遍历所有的 offsettop 值 , 判断当前所在的区间
for (let i = 0 ; i < offsetTopArr.length ; i ++){
if (offsetTopArr[i] < scrolled && offsetTopArr[i + 1] > scrolled) {
if (level != i) {
// 根据当前楼层 i 找到对应的 nav 的 li
for(let index = 0; index < navLiArr.length;index++){
if (index == i) {
navLiArr[i].className = 'hong'
}else{
navLiArr[index].className = ''
}
}
level = i
}
}
}
}
1回答
好帮手慕小李
2022-01-21
同学你好,老师使用同学提供的js反推出了html与css,但老师这边在点击导航时是可以触发window.onscroll事件的。建议同学把涉及到的所有代码(html、css)也一并发过来,老师重新帮同学定位问题。祝学习愉快!

相似问题