所以我得到了这个导航高亮滚动功能，之后我添加了一个新的功能，带我到想要的部分，我面临这个问题。
每当我在第一个按钮上，我点击第三个元素时，我可以看到第二个按钮上闪烁的红色背景(当你手动滚动时你也可以看到)。这是因为每次滚动时滚动函数都在触发。有办法避免这种情况吗?我尝试添加过渡时间css，但每次滚动时它都会重新触发。
function goTo(element) {
element.scrollIntoView({ behavior: "smooth" });
}
const sectionOne = document.querySelectorAll('.observe');
const buttonList = document.querySelectorAll('button')
const box = document.querySelector('.box');
function myScroll(e) {
let current = ""
sectionOne.forEach((item) => {
if (box.scrollTop >= (item.offsetTop - 50)) {
current = item.getAttribute("id")
}
})
buttonList.forEach((button) => {
button.classList.remove("bg-red-500")
if (button.classList.contains(current)) {
button.classList.add("bg-red-500")
}
})
}.box {
border: 1px solid black;
height: 300px;
overflow-y: auto;
width: 100%;
box-sizing: border-box;
}
.observe {
margin-bottom: 40px;
}
.bg-red-500 {
background: red;
}
.flex {
display: flex;
position: fixed;
top: 0;
}<div class="body">
<div class="flex">
<button class="ob1">
1st
</button>
<button class="ob2">
2nd
</button>
<button class="ob3">
3rd
</button>
</div>
<div class="box" onscroll="myScroll()">
<div id="ob1" class="observe">
1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="ob2" class="observe">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="ob3" class="observe">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. 3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 3. Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>您可以执行以下操作。这是一个粗糙的解决方案，如果将来有更多的内容，您将需要增加超时时间。
const sectionOne = document.querySelectorAll('.observe');
const buttonList = document.querySelectorAll('button')
const box = document.querySelector('.box');
let isAutoScroll = false
function higlightCurrentSectionButton () {
if(isAutoScroll) return
let current = ""
sectionOne.forEach((item) => {
if (box.scrollTop >= (item.offsetTop - 50)) {
current = item.getAttribute("id")
}
})
buttonList.forEach((button) => {
button.classList.remove("bg-red-500")
if (button.classList.contains(current)) {
button.classList.add("bg-red-500")
}
})
}
function myScroll() {
higlightCurrentSectionButton()
}
function goTo(id) {
isAutoScroll = true
var element = document.getElementById(id);
element.scrollIntoView({ behavior: "smooth" });
setTimeout(function() {
isAutoScroll = false
higlightCurrentSectionButton()
}, 500);
}.box {
border: 1px solid black;
height: 300px;
overflow-y: auto;
width: 100%;
box-sizing: border-box;
}
.observe {
margin-bottom: 40px;
width: 400px;
padding: 20px;
}
.bg-red-500 {
background: red;
}
.flex {
display: flex;
position: fixed;
top: 0;
}<div class="body">
<div class="flex">
<button class="ob1" onclick="goTo('ob1')">
1st
</button>
<button class="ob2" onclick="goTo('ob2')">
2nd
</button>
<button class="ob3" onclick="goTo('ob3')">
3rd
</button>
</div>
<div class="box" onscroll="myScroll()">
<div id="ob1" class="observe">
1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="ob2" class="observe">
2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="ob3" class="observe">
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. 3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 3. Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>更合适的解决方案是使用交集观察者，并改变发生交集的标志。