How does onScrollCapture listen only for vertical scrolling in react, without triggering events when scrolling horizontally?

onScrollCapture only listens for vertical scrolling.

in the development of a project, pull-down scrolling should be done. When the scroll bar is at the bottom, horizontal scrolling appears, and when scrolling, onScrollCapture

is triggered.

related codes


    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>
      
The onScrollHandle () method above is triggered only when

scrolls vertically.

Aug.19,2021

give me an idea to try

make a decision when scrolling, judge the value of scrollLeft, and then decide whether to continue

.

overflow-x: hidden; try this too

Menu