我需要在頁面底部有一個可滾動元素。我想我會簡單地設置position: fixed和bottom:0。問題是，這是一個水平的項目列表，我應該可以在 X 軸上滾動。根據我收集的信息，我似乎無法在position: fixed元素上滾動。但通過刪除它，我就無法將其放在頁面底部。怎么解決這個問題呢？這是我的應用程序當前的示例：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>    )}