Javascript 当用户手动向上或向下滚动时重置当前区段计数器

我正在实现一个按钮，它将为一个团队成员单击垂直向下滚动。到目前为止，我已经成功地为一个团队成员向下滚动一次，但是当用户手动滚动回顶部时，代码就会中断

这里有工作

我的代码

<main class="team container">
    <div v-for='(element, index) in members' :id="element.specialId" class="team__member" v-show="activeIndex === index || widthSmall">
        <div class="team__member__bio">
            <div class="team__member__name">{{element.name}}</div>
        </div>
    </div>
    <a class="scroll-more scroll-team" v-show="widthSmall" @click="move($event)" style="cursor: pointer;">
        <span></span>{{ $t('scroll') }}
    </a>
</main>

export default {
    name: "Team",
    data() {
        return {
            members: [
                {
                    name: "Bojan Dovrtel",
                    specialId: 'bojan-div'
                },
                {
                    name: "Klemen Razinger",
                    specialId: 'kelemen-div'
                },
                {
                    name: "Davor Pečnik",
                    specialId: 'davor-div'
                },
                {
                    name: "Maja Katalinič",
                    specialId: 'maja-div'
                },
                {
                    name: "Petra Vovk",
                    specialId: 'petra-div'
                }
            ],
            secs: document.getElementsByClassName('team__member'),
            currentSection: 0,
        }
    },
    methods: {
        move(e) {
            if (this.currentSection < this.secs.length) {
                if (this.currentSection === 3) {
                    this.widthSmall = false;
                }
                window.scroll({
                    top: this.secs[++this.currentSection].offsetTop,
                    left: 0,
                    behavior: 'smooth'
                });
            } else if (this.currentSection > 0) {
                window.scroll({
                    top: this.secs[--this.currentSection].offsetTop,
                    left: 0,
                    behavior: 'smooth'
                });

            }
        }
    }
};

{{element.name}
{{$t（'scroll'）}
导出默认值{
名称：“团队”，
数据（）{
返回{
成员:[
{
名称：“Bojan Dovrtel”，
特辑：“博扬分区”
},
{
姓名：“克莱门·拉辛格”，
特辑：“科勒曼分区”
},
{
姓名：“Davor Pečnik”，
特辑：“达沃分区”
},
{
姓名：“Maja Katalinič”，
特辑：“maja div”
},
{
姓名：“佩特拉·沃克”，
特辑：“佩特拉分区”
}
],
secs:document.getElementsByClassName（“团队成员”），
当前节：0，
}
},
方法：{
动议（e）{
if（此.currentSection<此.secs.长度）{
if（this.currentSection==3）{
这一点很小=错误；
}
滚动窗口({
顶部：this.secs[++this.currentSection].offsetTop，
左:0,，
行为：“平滑”
});
}else if（this.currentSection>0）{
滚动窗口({
顶部：this.secs[--this.currentSection].offsetTop，
左:0,，
行为：“平滑”
});
}
}
}
};

---

如何检测用户已向上滚动并更改当前节的值？如果您有任何其他信息，请让我知道，我会提供。谢谢

要检测用户已滚动，您可以在正在滚动的容器上侦听

滚动

事件。在本例中，这将是根元素，因此您可以使用

window

添加事件侦听器

实现这一点的一种方法是在

创建的

和

销毁的

生命周期挂钩中添加和删除

滚动

侦听器，如前所述

请注意，当您使用

窗口触发滚动时，也会触发滚动事件。滚动（{…}）

，而不仅仅是用户滚动。所以，你需要处理好这件事

我建议在

scroll

事件侦听器中添加某种节流，然后通过更改

currentSection

值，在节流后响应所有

scroll

事件

例如，您的

滚动

事件处理程序可以是：

...,
onScroll(e) {
  if(this.throttle) {
    clearTimeout(this.throttle);
  }

  this.throttle = setTimeout(() => (this.currentSection = this.findCurrentSection(e)), 300);
},
...

其中

throttle

只是用于保存超时值的数据成员。查找

currentSection

值的逻辑仅在最后一次

滚动事件发生300毫秒后触发。如前所述，您还可以使用
requestAnimationFrame
执行此操作

findCurrentSection
只是一个基本方法，它迭代
secs
数组，根据当前滚动值查找当前节

...,
findCurrentSection(e) {
  const curTop = document.documentElement.scrollTop;
  for(let i=0, len=this.secs.length; i < len; ++i) {
    const secTop = this.secs[i].offsetTop;
    if(curTop === secTop) {
        return i;
    } else if(curTop < secTop) {
        return Math.max(i-1, 0);
    }
  }
},
...

。。。，
findCurrentSection（e）{
const curTop=document.documentElement.scrollTop；
for（设i=0，len=this.secs.length；i

请注意，由于在这种特殊情况下滚动容器是根元素，因此我使用的是
document.documentElement.scrollTop
，但根据上下文，您可以从相应的
ScrollEvent
（在这种情况下是
e
）中获得所需的值

这是一个基于你的问题的答案。还请注意，我已根据引入的更改修改了
移动
功能。
要检测用户是否已滚动，您可以在正在滚动的容器上侦听
滚动
事件。在本例中，这将是根元素，因此您可以使用
window
添加事件侦听器

实现这一点的一种方法是在
创建的
和
销毁的
生命周期挂钩中添加和删除
滚动
侦听器，如前所述

请注意，当您使用
窗口触发滚动时，也会触发滚动事件。滚动（{…}）
，而不仅仅是用户滚动。所以，你需要处理好这件事

我建议在
scroll
事件侦听器中添加某种节流，然后通过更改
currentSection
值，在节流后响应所有
scroll
事件

例如，您的
滚动
事件处理程序可以是：

...,
onScroll(e) {
  if(this.throttle) {
    clearTimeout(this.throttle);
  }

  this.throttle = setTimeout(() => (this.currentSection = this.findCurrentSection(e)), 300);
},
...

其中
throttle
只是用于保存超时值的数据成员。查找
currentSection
值的逻辑仅在最后一次
滚动事件发生300毫秒后触发。如前所述，您还可以使用
requestAnimationFrame
执行此操作

findCurrentSection
只是一个基本方法，它迭代
secs
数组，根据当前滚动值查找当前节

...,
findCurrentSection(e) {
  const curTop = document.documentElement.scrollTop;
  for(let i=0, len=this.secs.length; i < len; ++i) {
    const secTop = this.secs[i].offsetTop;
    if(curTop === secTop) {
        return i;
    } else if(curTop < secTop) {
        return Math.max(i-1, 0);
    }
  }
},
...

。。。，
findCurrentSection（e）{
const curTop=document.documentElement.scrollTop；
for（设i=0，len=this.secs.length；i

请注意，因为在这种特殊情况下，滚动容器是根元素