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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36dad-2b3ae.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36dad-2b3ae.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?