// 滚动监听器 export function onScroll() { // 获取所有锚点元素 const navContents = document.querySelectorAll('.models') // 所有锚点元素的 offsetTop const offsetTopArr = [] navContents.forEach(item => { offsetTopArr.push(item.offsetTop) }) // 获取当前文档流的 scrollTop const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 定义当前点亮的导航下标 let navIndex = 0 for (let n = 0; n < offsetTopArr.length; n++) { // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见 // 那么此时导航索引就应该是n了 if (scrollTop+210 >= offsetTopArr[n]) { navIndex = n } //若滚动条已经到底则直接激活最后一个导航 if (scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight) { navIndex = offsetTopArr.length - 1; } } //active.value = navIndex return navIndex; } // 跳转到指定索引的元素 export function scrollTo(index) { // 获取目标的 offsetTop // css选择器是从 1 开始计数,我们是从 0 开始,所以要 +1 const targetOffsetTop = document.querySelector(`.content .models:nth-child(${index + 1})`).offsetTop // 获取当前 offsetTop let scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 定义一次跳 150 个像素 const STEP = 50 // 判断是往下滑还是往上滑 if (scrollTop > targetOffsetTop) { // 往上滑 smoothUp() } else { // 往下滑 smoothDown() } // 定义往下滑函数 function smoothDown() { // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置 if (scrollTop < targetOffsetTop) { // 如果和目标相差距离大于等于 STEP 就跳 STEP // 否则直接跳到目标点,目标是为了防止跳过了。 if (targetOffsetTop - scrollTop >= STEP) { scrollTop += STEP } else { scrollTop = targetOffsetTop } document.body.scrollTop = scrollTop document.documentElement.scrollTop = scrollTop // 关于 requestAnimationFrame 可以自己查一下,在这种场景下,相比 setInterval 性价比更高 requestAnimationFrame(smoothDown) } } // 定义往上滑函数 function smoothUp() { if (scrollTop > targetOffsetTop) { if (scrollTop - targetOffsetTop >= STEP) { scrollTop -= STEP } else { scrollTop = targetOffsetTop } document.body.scrollTop = scrollTop document.documentElement.scrollTop = scrollTop requestAnimationFrame(smoothUp) } } } export function formatDate(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; var D = date.getDate() + ' '; var h = date.getHours() + ':'; var m = date.getMinutes() + ':'; var s = date.getSeconds(); return Y+M+D+h+m+s; }