Javascript 类内的事件侦听器-自动使用

我想将网站上的滑块更改为对象。我几乎做到了（我想是的），但我对EventListener有一个问题。这种情况是，当我重新加载页面时，视口会自动向下滚动，并且我想要绑定的按钮不起作用

class Scroller {
    constructor() {
        this.button = document.querySelectorAll(".site-part");
        this.conntactButton = document.querySelector(".slider button");
        this.navbar = document.querySelector(".navbar-element");
        this.differenceY = this.getNavbarHeight(this.navbar);
        this.isEdge = this.isEdge();
        this.sections = document.querySelectorAll('.scroll-to');
        this.contactSection = document.querySelector('.contact');

        this.addScroll();
    }

    isEdge() {
        if (/Edge/.test(navigator.userAgent)) {
            return true;
        } else {
            return false;
        }
    }

    getNavbarHeight(element) {
        if (screen.width < 768) {
            return 60;
        } else {
            return element.getBoundingClientRect().height;
        }
    }

    getPosition(element) {
        return Math.ceil(element.getBoundingClientRect().top + window.scrollY - this.differenceY);
    }

    scroll(element) {
        window.scrollTo({
            behavior: 'smooth',
            top: this.getPosition(element),
        });
    }

    addScroll() {
        // for (let i = 0; i < this.button.length; i++) {
        //     this.button[i].addEventListener('click', this.scroll(this.sections[i]));
        // }
        this.conntactButton.addEventListener('click', this.scroll(this.contactSection))
    }

}

类滚动条{
构造函数（）{
this.button=document.queryselectoral（“.site part”）；
this.conntactButton=document.querySelector（“.slider button”）；
this.navbar=document.querySelector（“.navbar元素”）；
this.differenceY=this.getNavbarHeight（this.navbar）；
this.isEdge=this.isEdge（）；
this.sections=document.querySelectorAll（'.scroll to'）；
this.contactSection=document.querySelector（“.contact”）；
这个.addScroll（）；
}
isEdge（）{
if（/Edge/.test（navigator.userAgent））{
返回true；
}否则{
返回false；
}
}
getNavbarHeight（元素）{
如果（屏幕宽度<768）{
返回60；
}否则{
返回元素.getBoundingClientRect（）.height；
}
}
getPosition（元素）{
返回Math.ceil（element.getBoundingClientRect（）.top+window.scrollY-this.differenceY）；
}
滚动（元素）{
window.scrollTo({
行为：“平滑”，
顶部：此.getPosition（元素），
});
}
addScroll（）{
//for（设i=0；i

联系人按钮的事件侦听器失去作用域。您需要在构造函数中使用bind（）。在构造函数（）内的第行下方放置： this.contactButton=this.contactButton.bind（this）；

---

我认为应该行得通。试试看，让我知道这是否有效。

我找到了解决方案，只需使用箭头功能：

    addScroll() {
        for (let i = 0; i < this.button.length; i++) {
            this.button[i].addEventListener('click', () => {
                this.scroll(this.sections[i]);
            });
        }
        this.conntactButton.addEventListener('click', () => {
            this.scroll(this.contactSection);
        });
    }

addScroll（）{
for（设i=0；i{
本.滚动条（本.节[i]）；
});
}
此.conntactButton.addEventListener（'单击'，（）=>{
this.scroll（this.contact部分）；
});
}

---

有没有其他方法可以让它工作？

如果你想把它放在function

this.addScroll（）下的constructor（）中；this.contactButton=this.contactButton.bind（this）

，不幸的是，它没有工作。我看到你现在找到了解决方案。

.bind

：

这个.conntactButton.addEventListener（'click'，这个.scrol（…）.bind（这个））

这个.conntactButton.addEventListener（'click'，这个.滚动（这个.contactSection））调用

this。立即滚动

并将其返回值

未定义

传递给

addEventListener

。