Событие прокрутки Stencil.js (.tsx) не распространяется от потомка

Question

Я разрабатываю компонент ранжирования статей в Stencil.js, который должен прокручиваться вниз / вверх вместе с событием колеса мыши. Это хорошо работает на Chrome, но в Firefox, когда мышь находится над дочерним элементом (статья), кажется, что событие не распространяется правильно, поэтому функция прокрутки никогда не срабатывает. С другой стороны, когда мышь находится над пустой зоной между статьями, поток работает, как ожидалось.

Конечно, я не хочу использовать css overflow: прокрутка, мне нужно прокручивать контент программно, чтобы прокрутить полную строку за прокрутку.

Я пытался установить событие для детей fib-article, но оно не работает

Это пример кода:

    /**
     * Add mousewheel event to an element
     *
     * @param element elemnt to add event listener
     */
    _addMouseScrollEvent(element) {
        element.removeEventListener("mousewheel", this._mouseWheelHandler);
        element.removeEventListener("onmousewheel", this._mouseWheelHandler);
        element.removeEventListener("DOMMouseScroll", this._mouseWheelHandler);
        element.addEventListener("mousewheel", this._mouseWheelHandler, false);
        element.addEventListener("onmousewheel", this._mouseWheelHandler, false);
        element.addEventListener("DOMMouseScroll", this._mouseWheelHandler, false);
    }

    render() {
        this._cols = [];
        return (
            <div class="fib-container">
                <div
                    class="article-container animated fadeInUp"
                    style={{ height: `${this._maxHeight}px` }}
                    ref={el => this._addMouseScrollEvent(el)}
                >
                    {this._headers.map(header => (
                        <div
                            class={"articles " + `articles--${this._direction}`}
                            style={this._direction === "column" ? { width: `${this._width}px` } : {}}
                            ref={el => this._cols.push(el)}
                        >
                            {// Articles inside current category
                            this._data[header].map((article, idx) => (
                                <fib-article
                                    height={this._height}
                                    width={this._width}
                                />
                            ))}
                        </div>
                    ))}
                </div>
            </div>
        );
    }

Мы ожидаем, что сможем вызвать событие прокрутки, когда мышь находится над fib-article