vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点
最近在用vue写官网，别问我为什么用vue写官网，问就是不会jq。。。。vue都出现11年了。。。
左侧目录：点击时，右侧区域可以自动滚动到指定的位置。
右侧区域手动滚动时，左侧锚点可以自动切换到对应的目录上
从而实现双向锚点的功能：
直接上代码：
解决步骤1：左侧锚点部分
<div class="leftFixed">
<div @click="goId('shouyeId')" :class="[currentId == 'shouyeId' ? 'activeCls' : '']">我的首页</div>
<div @click="goId('gongchangId')" :class="[currentId == 'gongchangId' ? 'activeCls' : '']">工厂展示&档案</div>
<div @click="goId('chanxianId')" :class="[currentId == 'chanxianId' ? 'activeCls' : '']">产线展示</div>
<div @click="goId('gongyiId')" :class="[currentId == 'gongyiId' ? 'activeCls' : '']">工艺能力&制程</div>
<div @click="goId('chanpinId')" :class="[currentId == 'chanpinId' ? 'activeCls' : '']">产品展示</div>
<div @click="goId('tixiId')" :class="[currentId == 'tixiId' ? 'activeCls' : '']">体系认证</div>
<div @click="goId('pingjiaId')" :class="[currentId == 'pingjiaId' ? 'activeCls' : '']">用户评价</div>
</div>
对应的css代码：
<style lang="less" scoped>
.leftFixed {
position: fixed;
top: 100px;
left: 110px;
background: #fff;
padding: 16px;
display: flex;
flex-direction: column;
div {
padding: 5px 0;
padding-left: 20px;
cursor: pointer;
&.activeCls {
color: #1f833b;
font-weight: bold;
position: relative;
&:before {
content: "";
/* 使用空内容 */
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 0;
height: 0;
border-top: 5px solid transparent;
/* 控制箭头的上半部分 */
border-bottom: 5px solid transparent;
/* 控制箭头的下半部分 */
border-left: 10px solid #1f833b;
/* 控制箭头的右侧，创建箭头效果 */
}
}
}
}
</style>
对应的js代码：
goId(id) {
document.getElementById(id).scrollIntoView();
this.currentId = id;//用于显示当前指定的目录
},
解决步骤2：右侧区域滚动后左侧自动回显
在mounted方法中写以下代码：
if(document.getElementById("content_wrap")){
window.addEventListener(
"scroll",
() => {
let elements = document.getElementById("content_wrap").querySelectorAll("[id]"); // 获取所有有ID的元素
let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
let closestElement = null;
let closestDistance = Infinity;
elements.forEach((element) => {
let distance = Math.abs(element.getBoundingClientRect().top - scrollPosition);
if (distance < closestDistance) {
closestDistance = distance;
closestElement = element;
}
});
if (closestElement && closestElement.id && typeof closestElement.id == "string") {
this.currentId = closestElement.id;
console.log("Closest element to the top of the viewport is:", closestElement.id);
}
},
{ passive: true, capture: true }
); // 使用捕获阶段和标记为 passive 以提高性能
}
注意一定要写{ passive: true, capture: true }，否则可能会出现监听不到scroll的情况
通过上面的两个步骤，就可以实现双向锚点的效果了！！！
多多积累，多多收获！！！
当我把上面的代码发给cursor帮我进行解析时，它给我了可以添加【防抖/节流】的优化建议：
让我帮你分析这段代码。这是一个用于监听滚动事件并确定最接近视口顶部元素的代码段。让我逐步分析：
1.初始条件判断：
if(document.getElementById(“content_wrap”))
首先检查页面中是否存在 ID 为 content_wrap 的元素，这是一个安全检查。
2.事件监听器设置：
window.addEventListener(“scroll”, callback, { passive: true, capture: true })
在窗口上添加滚动事件监听器
passive: true - 告诉浏览器这个监听器不会调用 preventDefault()，这可以提高滚动性能
capture: true - 使用事件捕获而不是冒泡，确保这个监听器最先执行
3.元素获取：
let elements = document.getElementById(“content_wrap”).querySelectorAll(“[id]”)
在 content_wrap 容器内查找所有带有 ID 属性的元素
使用属性选择器 [id] 来选择这些元素
4.滚动位置获取：
let scrollPosition = window.pageYOffset || document.documentElement.scrollTop
获取当前页面的垂直滚动位置
使用降级方案确保兼容性
5.查找最近元素的逻辑：
let closestElement = null;
let closestDistance = Infinity;
elements.forEach((element) => {
let distance = Math.abs(element.getBoundingClientRect().top - scrollPosition);
if (distance < closestDistance) {
closestDistance = distance;
closestElement = element;
}
});
初始化变量来跟踪最近的元素
遍历所有带 ID 的元素
计算每个元素到视口顶部的距离
更新距离最近的元素
6.结果处理：
if (closestElement && closestElement.id && typeof closestElement.id == “string”) {
this.currentId = closestElement.id;
console.log(“Closest element to the top of the viewport is:”, closestElement.id);
}
进行安全检查确保找到了元素且有有效的 ID
更新 currentId 属性
在控制台输出最近元素的 ID
主要用途：
这段代码通常用于实现滚动监听功能，比如文档导航或目录高亮
可以用来实现类似于"目录跟随阅读位置"的功能
对于长文档或教程类网站特别有用
性能考虑：
使用了 passive: true 提高滚动性能
但是每次滚动都会触发 DOM 查询和计算，如果元素很多可能会影响性能
可以考虑添加节流（throttle）来优化性能
改进建议：
可以添加防抖或节流来减少计算频率
考虑缓存 elements 查询结果，避免每次滚动都查询 DOM
可以添加一个最小距离阈值，只在距离大于某个值时才更新
考虑使用 Intersection Observer API 作为替代方案，可能更高效
根据上面提供的改进建议，我让cursor帮我实现了一下防抖/节流的效果
我来帮你添加防抖函数来优化这段代码。下面是添加防抖后的代码：
// 首先定义一个防抖函数
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 使用防抖优化后的滚动监听代码
if(document.getElementById("content_wrap")){
// 将滚动处理函数单独提取出来
const handleScroll = () => {
let elements = document.getElementById("content_wrap").querySelectorAll("[id]");
let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
let closestElement = null;
let closestDistance = Infinity;
elements.forEach((element) => {
let distance = Math.abs(element.getBoundingClientRect().top - scrollPosition);
if (distance < closestDistance) {
closestDistance = distance;
closestElement = element;
}
});
if (closestElement && closestElement.id && typeof closestElement.id == "string") {
this.currentId = closestElement.id;
console.log("Closest element to the top of the viewport is:", closestElement.id);
}
};
// 创建防抖后的处理函数，设置 200ms 的延迟
const debouncedHandleScroll = debounce(handleScroll, 200);
// 添加事件监听器，使用防抖后的函数
window.addEventListener(
"scroll",
debouncedHandleScroll,
{ passive: true, capture: true }
);
}
这个优化版本的主要改进点：
添加防抖函数：
通过 debounce 函数实现防抖
防抖函数会等待用户停止滚动 200ms 后才执行计算
这样可以显著减少函数执行次数
函数结构优化：
将滚动处理逻辑提取为单独的 handleScroll 函数
使用 debounce 包装处理函数
保持了原有的功能，但大大提升了性能
防抖时间设置：
设置了 200ms 的防抖延迟时间
这个时间可以根据实际需求调整
时间设置太短可能效果不明显，太长可能影响用户体验
上面的代码还可以二次优化，因为这个页面全是静态数据，也就是可以通过下面的方法来处理
额外的优化建议：
1.缓存 DOM 查询：
if(document.getElementById("content_wrap")){
// 缓存 content_wrap 元素
const contentWrap = document.getElementById("content_wrap");
// 缓存所有带 ID 的元素（如果元素列表不会动态变化）
const elements = contentWrap.querySelectorAll("[id]");
const handleScroll = () => {
let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
let closestElement = null;
let closestDistance = Infinity;
elements.forEach((element) => {
// ... 其余代码不变
});
};
const debouncedHandleScroll = debounce(handleScroll, 200);
window.addEventListener("scroll", debouncedHandleScroll, { passive: true, capture: true });
}
2.添加清理函数
if(document.getElementById("content_wrap")){
// ... 其他代码
// 在组件卸载时清理事件监听
const cleanup = () => {
window.removeEventListener("scroll", debouncedHandleScroll);
};
// 如果在 Vue 或 React 组件中使用，可以在组件卸载时调用 cleanup
return cleanup; // 返回清理函数
}
这些优化可以显著提高代码的性能，特别是在长页面或频繁滚动的情况下。防抖可以有效减少不必要的计算，同时保持功能的响应性。根据具体使用场景，你可以调整防抖的时间间隔来平衡性能和用户体验。