Question

处理一些信使功能（想想像FB或WhatsApp这样的聊天应用）。数据库的东西很棒，它在浏览器中显示，发送和接收的消息（我使用Chrome浏览器）。发送新邮件时，它没有显示任何问题。

问题=当有足够的消息来触发div的垂直滚动时，一切都很好 - 直到我向上滚动才能看到较旧的消息。然后即使向下滚动一直滚动＆＃34;锁定＆＃34;永远丢失（或者至少在刷新浏览器页面之前）。

我做了一些搜索，但我认为我对问题缺乏了解（以及使用的正确关键词）没有带来任何结果。非常感谢任何帮助！

Edit2：还将gif上传到此链接以澄清：

https://gfycat.com/ifr/MasculineHeartfeltBirdofparadise

编辑：包含一些代码。有些子组件我不会被包含，因为它嵌套得非常深，但基本上它会呈现一个聊天窗口。上面的GIF将使它更清晰。由于此处包含的CSS，整个组件在Y轴上可以滚动。

＆＃13;

@graphql(gql`
  query ($mostRecent: Int, $userId: Int) {
    messages(mostRecent: $mostRecent, userId: $userId) {
      messageId
      userId
      messageText
      isAdmin
      createdAt
    }
  }
`, {
  options: props => ({
    variables: {
      mostRecent: 25,
      userId: props.userId
    }
  })
})
export default class Messages extends Component {
  static propTypes = {
    closeConversation: PropTypes.func.isRequired,
    userId: PropTypes.number.isRequired,
    data: PropTypes.object.isRequired,
  }
  refetchMessages = () => {
    this.props.data.refetch()
  }
  loadMoreMessages = (userId) => {
    this.props.data.refetch({mostRecent: this.props.data.messages.length + 25, userId: this.props.userId})
  }
  render() {
    if (this.props.data.loading) return <Loading />

    return <div style={styles.messageInterface} key={this.props.userId}>
      <div style={{position: 'absolute', top: '0px', right: '0px',
        width: '100%', backgroundColor: 'white', height: '50px',
        borderBottom: '1px solid lightgray', zIndex: '1'}}
      >
        <div style={{display: 'flex', flexDirection: 'column'}}>
        <MessengerUserInfo userId={this.props.userId} />
        </div>
        <Button type="button" onClick={this.props.closeConversation} bsStyle="link"
          style={{fontSize: '21px', fontWeight: '700', textDecoration: 'none', color: '#000',
          position: 'absolute', right: '20px', top: '3px'}}
        >
          <span aria-hidden="true" style={{opacity: '0.2', ':hover': {opacity: '0.5'}}}X</span>
        </Button>
      </div>
      <MessageForm userId={this.props.userId} refetchMessages={this.refetchMessages}/>
      <div style={{...styles.messageInterface, padding: '20px', marginTop: '50px'}}>
          {this.props.data.messages.map((item)=> {
            return <Message key={item.messageId} messages={item}/>
          })}
          <div style={{alignSelf: 'center', paddingTop: '15px'}}><Button bsStyle='success' onClick={this.loadMoreMessages}>Load more</Button></div>
      </div>
    </div>
  }
}

＆＃13;

let styles = {
  messageInterface: {
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column-reverse',
    overflowY: 'scroll',
    overflowX: 'hidden',
    position: 'relative'
  },
 }

＆＃13;

自定义信使应用

0 个答案: