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

debugcn 发表于 Dev

灵魂

我需要在页面底部有一个可滚动元素。

我以为我只是竟被设置会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>
    )
}



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>

煨

这很容易解决！

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。