我需要在頁面底部有一個(gè)可滾動(dòng)元素。我想我會(huì)簡單地設(shè)置position: fixed和bottom:0。問題是，這是一個(gè)水平的項(xiàng)目列表，我應(yīng)該可以在 X 軸上滾動(dòng)。根據(jù)我收集的信息，我似乎無法在position: fixed元素上滾動(dòng)。但通過刪除它，我就無法將其放在頁面底部。怎么解決這個(gè)問題呢？這是我的應(yīng)用程序當(dāng)前的示例：const items = ['item1', 'item2',  'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10', 'item11', 'item12', 'item13', 'item14', 'item15', 'item16', 'item17', 'item18']const App = () => {    return (      <div>        My app...        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore         <h3>The following are the two versions of my components:</h3>            <p style={{ color: 'blue' }}>Without position fixed (blue one): on the wrong spot but can scroll</p><p style={{ color: 'red' }}>With position fixed (red one): On the bottom of the screen as I want to, but cant scroll...</p>        <div style={{                display: 'flex',                bottom: 0,                position: 'fixed',                overflowX: 'scroll',                backgroundColor: 'red'              }}>                {items.map((item, index) => (                    <div key={index} style={{ overflowX: 'visible', margin: '0 30px', height: '100%' }}>                        <h2>{item}</h2>                    </div>                ))}            </div>              <div style={{                display: 'flex',                bottom: 0,                overflowX: 'scroll',                backgroundColor: 'blue'            }}>                {items.map((item, index) => (                    <div key={index} style={{ overflowX: 'visible', margin: '0 30px', height: '100%' }}>                        <h2>{item}</h2>                    </div>                ))}            </div>      </div>    )}