onScrollCapture在react里如何做到只监听纵向滚动，横向滚动时，不触发事件？

Question

onScrollCapture只监听纵向滚动。

项目开发中，要做下拉滚动，当滚动条到底时，横向滚动出现了，滚动时，触发了onScrollCapture

相关代码

    onScrollHandle = () => {
        // eslint-disable-next-line
        const scrollTop = this.scrollRef.scrollTop;
        // eslint-disable-next-line
        const clientHeight = this.scrollRef.clientHeight;
        // eslint-disable-next-line
        const scrollHeight = this.scrollRef.scrollHeight;
        const isBottom = scrollTop + clientHeight === scrollHeight;
        if (isBottom && scrollTop) {
          message.success('到底了~');
        }
      };
      
      <div
          onScrollCapture={() => this.onScrollHandle()}
          style={{ maxHeight: '659px', overflowY: 'scroll' }}
          ref={c => {
            this.scrollRef = c;
          }}
        >
          <BdpTable
            scroll={{ x: '200%' }}
            loading={inTbLoading || outTbLoading}
            noPageNation
            data={tData}
            columns={columns}
          />
      </div>
      

纵向滚动时，才触发上面的onScrollHandle()方法。

Answer 1

给个思路试一下

做个判断 滚动时，判断scrollLeft的值，再决定是否继续

overflow-x: hidden; 这个也试一下