我正在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上时能够触发滚动事件