Virtualisierte Liste reaktivieren Scrollen außerhalb der Sicht

Question

Ich habe ein funktionierendes virtuelles Scrolling Grid für um ein Dokument nach Sektionen auf der Seite anzuzeigen. Ich habe jetzt ein anderes RV für Suchergebnisse hinzugefügt, aber aus irgendeinem Grund scrollen die Inhalte aus der Sicht, wenn ich runterscrolle !! Ich versuchte es zu vereinfachen, um nur eine Liste mit vorgegebenen Höhen zu verwenden und potenzielle Faktoren zu eliminieren, und es gab mir immer noch diesen merkwürdigen Fehler. Der Code selbst funktioniert wie erwartet, es ist die Liste, die sich verhält. (Ich verwende tatsächlich Cell Mector, um Zeilenhöhe zu erhalten, aber selbst mit der folgenden Version funktioniert es). Hier ist der Code:

const rowRenderer = ({ index, isScrolling, style, key  }) => 
    this.resultRowRenderer(index, key, style, curList) 

resultRowRenderer(index, key, style, list) { 
    ... 
    return <Markup content={quote} onClick={() => jumpToLocCallback(location)} />  
} 

render() { 
    ... 
    const renderList = (curList, i) => { 
    const rowCount = curList.results.length 

    return (
     <List 
     key={i} 
     height={100} 
     rowHeight={30} 
     rowCount={rowCount} 
     rowRenderer={rowRenderer} 
     overscanRowCount={0} 
     width={700} 
     ref={(ref) => this.List = ref} 
     /> 
    ) 
    } 

    const renderLists = searchResultsLists.map(renderList) 

    return (
    <div className='results-sidebar'> 
     {renderLists} 
    </div> 
) 
} 

Dank

Answer 1

aber aus irgendeinem Grund die Inhalte blättern aus der Sicht, wenn ich nach unten scrollen !!

Dies wird fast immer durch einen fehlenden Wert style verursacht. (. Siehe here)

In Ihrem Fall sollten Sie dies ändern:

resultRowRenderer(index, key, style, list) { 
    quote = '...' 
    return <Markup content={quote} onClick={() => jumpToLocCallback(location)} /> 
} 

Um dies:

resultRowRenderer(index, key, style, list) { 
    quote = '...' 
    return (
    <Markup 
     content={quote} 
     key={key} 
     onClick={() => jumpToLocCallback(location)} 
     style={style} 
    /> 
) 
} 

Hinweis die zusätzlichen key und style Attribute. ;)