Question

我在React.js应用程序中使用“ react-custom-scrollbars”。每当用户滚动时，我都想调用一个方法。我正在为此尝试onUdpate方法。

<div className="thumbs-panel">
    <Scrollbars ref="scrollbars" onUpdate={this.handleUpdate.bind(this)}>
        <table className="scrollcontent" id="scrollcontent">
            <div className="thumbs-flex barc-thumb-flex">
                {this.state.sub_sprite && this.state.sub_sprite.map((sprite,j)=>(
                sixty_array.map((item,i)=>{
                return <div className={`thumb ${((this.state.thumb_active_from === ((sprite.time * 60) + (i+1))))||((this.state.thumb_active_from <= ((sprite.time * 60) + (i+1))) && (((sprite.time * 60) + (i+1)) <= this.state.thumb_active_to )) ? "active":""}`}>
                <div className="thumb-inner" onClick={this.selectThumb.bind(this, (sprite.time * 60) + (i+1))}>
                    <div className="image" style={{backgroundImage: `url('${sprite.url}')`, backgroundPositionX: -((i % 10) *100) + "px", backgroundPositionY: -(82 * Math.floor(i/10))}}></div>
                <div className="timestamp">{this.secondsToHms((sprite.time * 60) + (i+1))}</div>
            </div>
</div>
})
))}

</div>
</table>
</Scrollbars>
</div>

这是我们的onUpdate方法

handleUpdate(values){
        console.log("update called")
}

handleUpdate方法永远不会在滚动时被调用。我也尝试过onScroll方法，但是那也不起作用。怎么了？

Answer 1

您可以在componentDidMount(){ document.querySelector('/*Selector of your scrolling element*/').addEventListener('scroll', this.handleUpdate);

中添加侦听器

BigInt

onUpdate方法在react-custom-scrollbars中不起作用

1 个答案: