我在反應時遇到問題。我正在嘗試實現一個簡單的可滾動 div,其中包含很多子 div,可以透過水平滾動查看。
基本上每個子 div 對應一天。用戶在第一次查看有關當天和接下來幾天的信息時加載該組件。但是,如果用戶滾動(向左或向右),我希望能夠附加更多信息,實現某種“無限滾動功能”。
當我嘗試在父 div 的末尾附加新的子 div 時,我沒有任何問題。然而,當我嘗試在父div 的開頭附加新的子元素時(例如,用戶想要查看前幾天的內容),添加新元素後,滾動會發生變化,導致用戶對滾動發生變化的原因感到困惑。
我創建了一個小型 JS 小提琴來複製我的設定。嘗試點擊“新增左側”,您將看到當前的行為。 有沒有辦法在不改變整個視圖的情況下新增元素? https://jsfiddle.net/k75pvey3/3/
P.s.我在網路上看到了很多關於這個問題的答案。然而,我見過的所有這些都假設新元件具有特定的寬度。就我而言(正如我試圖在小提琴中顯示的那樣),我無法確定新添加的子 div 的寬度。
這裡是程式碼供參考:
function App(props) { const [array, setArray] = React.useState(['100', '321', '32', '412', '12', '33', '54']) const addLeft = () => { setArray([Math.floor(Math.random()*300), ...array]) } const addRight = () => { setArray([...array, Math.floor(Math.random()*300)]) } return ( <div className='App'> <button onClick={addLeft}>add left</button> <button onClick={addRight}>add right</button> <div className="container"> {array.map(i => (<div className="element" style={{minWidth:i}}>{i}</div>))} </div> </div> ); } ReactDOM.render(<App />, document.querySelector("#app"))
這是CSS:
.container { background-color: red; width: 550px; height: 120px; margin: auto; display: flex; overflow: auto; } .element { height: 100px; background-color: yellow; margin: 10px; font-size: 30px; color: black; display: flex; }
P粉9532317812024-03-20 09:56:17
我有一個壞消息給你,這通常是虛擬列表的複雜部分之一 - 在滾動軸的開頭添加一個新元素,同時保持滾動位置。
通常建議您使用現有的解決方案,例如 react-virtualized
或 react-window
。
如果您不想使用現有的庫,一種解決方案是您可以監聽div
內內容的width
(例如。Element.scrollWidth
),然後透過設定.scrollLeft
容器的值。但是,當您在滾動時加載時,情況會變得複雜,因為滾動可能“帶有慣性”,尤其是在觸控螢幕設備/筆記型電腦上的觸控板上。
(根據經驗,當我過於自信時,我可以自己編寫一個虛擬列表,最終由於很多邊緣情況而使用庫)