Как контролировать «это» для window.onscroll - PullRequest
Новая
       15

Как контролировать «это» для window.onscroll

0 голосов
/ 03 мая 2019

Справочная информация:

Я хочу отобразить диаграмму, когда пользователь прокрутил страницу вниз, где находится диаграмма.

У меня фон jQ, и я постепенно перехожу к чистому js, поэтому извиняюсь за смесь. Я заставляю себя использовать ECMA6 и таким образом изучать его, поэтому любая помощь искренне приветствуется.

Установка: 

// components.js
class Components {
    onwindowScroll(fn) {
        window.onscroll = fn;
    }
}

// charts.js
class Charts {
    constructor($chart) {
        this.chartTop = $chart.offset().top - window.innerHeight;
        this.chartHidden = true;
    }

    showChart() {
        const top = window.pageYOffset;
        if(top > this.chartTop && this.chartHidden) {
            this.chartHidden = false;
            this.displayChart();
        }
    }

    displayChart() {
        // render the chart
    }
}

// main.js
import {Components} from 'components';
import {Charts} from 'charts';

const main = () => {
    const components = new Components();
    const charts = new Charts($('#chartElement'));

    init();

    function init() {
        components.onwindowScroll(charts.showChart);
    }
}

Проблема:

В Charts.showChart 'this' это окно, а не Charts, поэтому this.chartTop не определено, а диаграмма не отображается.

Как мне контролировать 'this' при назначении функции window.onscroll?

Я читал об этом (простите за каламбур): Передача этого в функцию window.onscroll

... но не вижу, как применить эту логику к моей настройке.

Большое спасибо

...