Stencil.js(.tsx)滚动事件不会从子对象传播

时间:2019-07-03 16:47:46

标签: javascript firefox scroll

我正在Stencil.js中开发一个文章排名组件,该组件应随鼠标滚轮事件上下滚动。它在chrome上运行良好,但是在Firefox中,当鼠标悬停在子元素(文章)上时,该事件似乎无法正确传播,因此永远不会触发滚动功能。当鼠标悬停在文章之间的空白区域时,用张开的手可以使流程按预期工作。

我当然不喜欢使用CSS溢出:滚动,我需要以编程方式滚动内容,以便每次滚动滚动整行。

我已尝试将事件设置在儿童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上时能够触发滚动事件

0 个答案:

没有答案