为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

MMTTMM 2023-08-24 17:55:49
我需要在页面底部有一个可滚动元素。我想我会简单地设置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>    )}
查看完整描述

1 回答

?
陪伴而非守候

TA贡献1757条经验 获得超8个赞

这是一个简单的修复!


将可能比视口更宽的元素设置为 时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>


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 106 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信