React ref.current.scrollTop is undefined

Question

我得到了div什么是滚动。我需要对滚动事件进行一些操作，因为我正在使用语义UI的网站。我的问题是，由于某种原因，scrollTop是未定义的，但onScroll是被触发的。

import React, { Component, ScrollView } from 'react';
import './ChatRoom.css';
import { Container, Grid, Item, Image, Header, List, Message, Icon, Form, TextArea, Button } from 'semantic-ui-react'
import _ from 'lodash';

class ChatRoom extends Component {

listRef = React.createRef();

handleScroll = (event) => {
console.log(this.listRef.current.scrollTop) <- is undefined
}

render() 

{
return (

<List  onScroll = {this.handleScroll} ref ={this.listRef} className="ChatFrame" verticalAlign='middle' >

{
_.times(5, (index) => {

return (
<List.Item key={index}>
<Message className='ChatMessage' >
<Image onClick={handleClick} avatar  />
<Message.Content>
<Message.Header>Roman</Message.Header>
Hello how are you ?
</Message.Content>
</Message>
</List.Item>
)
})
}
</List>

)
}
}

export default ChatRoom;

Answer 1

你错了，

handleScroll = (event) => {
console.log(this.listRef.current.scrollTop) <- is undefined

您无法从元素中读取scrollTop，您可能想从事件中读取它，类似于

handleScroll = (event) => {
console.log(event.target.scrollTop) <- is undefined