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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何在react中设置scrollTop
    18
    0

    问题描述 无法设置scrollTop, 已经尝试了google前三页的搜索结果。

    <div className="chat-list" id="chatListDOM" ref={input => this.chatListDOM = input}>
                    <a className="more-history">加载更多历史消息</a>
                    {
                      chatList.map(item => {
                        return myId === item.sendId
                          ?<MessageType.MeText id={item.id} name={item.sendId} datetime={format(item.time, 'YYYY-MM-DD HH:mm')} text={item.text} />
                          :<MessageType.OthersText id={item.id} name={other.name} datetime={format(item.time, 'YYYY-MM-DD HH:mm')} text={item.text} />
                      })
                    }
                  </div>
    .right {
          width: 480px; height: 100%; border-left: 1px solid #e8e8e8; background-color: #f3f3f3;
          .header {
            border-bottom: 1px solid #e2e2e2;
            p {line-height: 32px;}
          }
          .chat-history-warp {
            width: 100%; height: 380px; overflow-y: scroll;
            .chat-list {
              margin: 14px; display: block;
              .more-history {
                display: block; margin-bottom: 10px; text-align: center; font-size: 12px; color: #777; cursor: pointer;
              }
            }
          }
          .chat-input-warp{
            width: 100%; height: 98px; border-top: 1px solid #e8e8e8; 
            textarea {
              display: block; width: 100%; height: 60px; padding: 10px 14px; overflow-x: hidden; overflow-y: auto;
              resize: none; outline: 0; background-color: #fff; border: 0; word-break: break-all; font-size: 13px;
              line-height: 17px; -webkit-appearance: none; background-color: #f3f3f3;
            }
            .input-bottom {
              display: flex; flex-direction: row-reverse; margin: 5px 20px;
              .ant-btn {height: 26px; background-color: #6088e6;}
            }
          }
        }
      setChatListScrollBottom () {
        console.log(this.chatListDOM)
        this.chatListDOM.scrollTop = this.chatListDOM.scrollHeight;
        this.chatListDOM.scrollTo(this.chatListDOM.scrollHeight,this.chatListDOM.scrollHeight)
        ReactDOM.findDOMNode(this.chatListDOM).scrollTop = this.chatListDOM.scrollHeight;
        ReactDOM.findDOMNode(this.chatListDOM).scrollTo(this.chatListDOM.scrollHeight,this.chatListDOM.scrollHeight)
        setTimeout(()=>{document.getElementById('chatListDOM').scrollTop = this.chatListDOM.scrollHeight}, 1000);
        setTimeout(()=>{document.getElementById('chatListDOM').scrollTo(this.chatListDOM.scrollHeight,this.chatListDOM.scrollHeight)}, 1000);
    
        console.log(this.chatListDOM.scrollTop, this.chatListDOM.scrollHeight);
        // document.body.scrollTop = this.refs.chatList.scrollHeight;
        // console.log(this.refs.chatList, this.refs.chatList && this.refs.chatList.scrollTop, document.body.scrollTop)
      }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部