固定在页面底部的可滚动元素

Question

我需要在页面底部有一个可滚动元素。我想我会简单地设置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>    )}

Answer 1

这是一个简单的修复！

将可能比视口更宽的元素设置为 时position: fixed，请务必指定left和right属性。

如果没有这些，固定位置元素就不受宽度限制，因此浏览器认为它不需要可滚动。

width: 100%在某些情况下您也可以使用。

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,

                left: 0, //  <--

                right: 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>

    )

}

ReactDOM.render(

    <App />,

    document.getElementById('app')

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>