账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    onScrollCapture在react里如何做到只监听纵向滚动,横向滚动时,不触发事件?
    40
    0

    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()方法。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 遍地狼烟 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部