VirtualScroll (列表)具有动态项目高度滚动不平滑和跳跃

Question

我已经调优了几乎一整天的VirtualScroll (列表)组件，但是没有运气。

我正在构建一个基于web的聊天应用程序，其中使用了反应虚拟化列表来显示聊天消息。由于消息可能有不同的内容和不同的高度，所以我使用react度量来计算项目高度，并在rowRenderer中发布rowRenderer。

结果很糟糕，每当我停止滚动时，VirtuallScroll列表就会跳来跳去。例如，当我滚动到浏览器的一半，我应该看到中间的消息，但它总是突然移动偏移量。请看一看录像：W64UoqloIkcm9oQ08xS09Zc1k/view?usp=sharing

因为我只使用List和Autosizer组件，所以我只将所需的css文件调整到我的项目中，类似于‘’

.VirtualScroll {
    width: 100%;
    outline: none;
}

For the render method, I nested a lot of flex components inside the rowRender: Here is the code:

render() {
    const inChat = this.context.store.getState().inChat;
    const {conversationList} = this.state;
    const imgUrl = 'img/builtin-wallpaper-1.jpg';
    const backgroundStyle = {
        backgroundImage: 'url(' + imgUrl + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'top left'
    };

    if (inChat.id === this.id && inChat.status === 'FETCHING'){
        return (
                <Box column center height="80%">
                    <CircularProgress />
                </Box>
        );
    } else if (inChat.id === this.id && inChat.status === 'FETCHED'){
        return (
                <Box column flex="1 0 100%" style={backgroundStyle}>
                    <HorizontalToolBar/>
                    <AutoSizer disableHeight={true}>
                        {({ width }) => (
                                <List
                                        ref={(element) => {this.VirtualScroll = element;}}
                                        className='VirtualScroll'
                                        height={window.innerHeight - toolbarHeight - textAreaHeight}
                                        overscanRowCount={10}
                                        noRowsRenderer={this._noRowsRenderer.bind(this)}
                                        rowCount={conversationList.length}
                                        rowHeight={i => {
                                    return (Measured_Heights[i.index] | 20);  // default Height = 58
                                }}
                                        rowRenderer={this._rowRenderer}
                                        scrollToIndex={undefined} // scroll to latest item
                                        width={width}
                                />
                        )}
                    </AutoSizer>
                    <InputControl chatId={this.id} sendChatText={this._sendChatText.bind(this)}/>
                </Box>
        );
    } else {
        return null;
    }
}

_rowRenderer ({ index, key, style, isScrolling }) {
    console.log(Measured_Heights);

    const rowData = this._getDatum(index);
    // let renderItem;

    // console.log('index = ' + index + ' key = ' + key);

    if (rowData.type == 'conversation') {

        if (rowData.data.type == netModule.TYPE_SYSTEM) {
            // system message
            return (
                    <Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}>
                        <SystemMessage data={rowData.data}/>
                    </Measure>
            )
        }

        if (rowData.data.senderId == this.state.selfProfile.username) {
            // outgoing message
            return (
                    <Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}>
                        <RightMessage
                                screenWidth={(window.innerWidth - leftToolBarWidth) / 2 }
                                screenHeight={window.innerHeight - toolbarHeight}
                                data={rowData.data}/>
                    </Measure>
            );

        } else {
            // incoming message
            // append userProfile to left messages
            return (
                    <Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}>
                        <LeftMessage
                                userId={rowData.data.senderId}
                                userProfile={this.state.groupUserProfiles[rowData.data.senderId]}
                                screenWidth={(window.innerWidth - leftToolBarWidth) / 2 }
                                screenHeight={window.innerHeight - toolbarHeight}
                                data={rowData.data}/>
                    </Measure>
            );
        }
    }
}

我读了一些文档，说明Flexbox可能会拦截滚动事件，但是即使我在嵌套组件中添加了overflow：，我也没有看到问题消失。您以前见过这种使用List组件滚动错误的行为吗？

任何建议都是欢迎的。

Answer 1

我看不见录像，但我想我最近也看到了类似的东西。据我所见，您没有使用传递给您的style方法的_rowRenderer参数。此参数包含一些CSS转换，使行出现在滚动列表中的右侧垂直位置。