Event Listener внутри класса - автоматически использовать

Question

Я хочу изменить свой слайдер на моем сайте на объект. Я почти сделал (я так думаю), но у меня есть одна проблема с 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))
    }

}

Answer 1

Я нашел решение, все, что мне нужно сделать, это использовать функцию стрелки:

    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);
        });
    }

Есть ли другой способ заставить эту работу?

Answer 2

Слушатель события для кнопки «контакт» потерял область действия. Вам нужно использовать bind () в конструкторе. Поместите строку ниже внутри конструктора (): this.contactButton = this.contactButton.bind (this); Я думаю, что это должно работать. Попробуйте и дайте мне знать, если это работает или нет.