通过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)也一并发过来,老师重新帮同学定位问题。祝学习愉快!

https://img.mukewang.com/climg/61ea75b5090977e518290733.jpg

0

0 学习 · 15276 问题

查看课程