使定位position:absolute样式水平滚动的方法

爱被打了一巴掌 2023-03-01 14:00 14阅读 0赞

平常水平滚动其实挺好实现的主要是给容器添加这两行代码实现：

white-space: nowrap;
      overflow-x: scroll;

但是加了个定位就不太行了，定位和这两行不在同一个容器中，所以要在这个容器的外层再加一个包裹的容器用来定位，里面那个容器就直接用来实现水平滚动。

先来看看效果图：

![20200727141538928.png][]

<html>
      <body>
        <div class='div-outer'>
          <div class='outer'>
    
           <div class="top">使定位position:absolute样式水平滚动的方法</div>
            
          <div class='inner'>
    
            <ul>
            <li>我是一个item</li>
              <li>我是一个item</li>
              <li>我是一个item</li>
              <li>我是一个item</li>
              <li>我是一个item</li>
              <li>我是一个item</li>
              <li>我是一个item</li>
              <li>我是一个item</li>
              
          </ul>
          </div>
        </div>
        </div>
        
      </body>
    </html>

.div-outer{
      padding:10px 200px;
      height:300px;
    }
    
    
    .outer{
      position:relative;
      width:100%;
      height:100%;
      border:1px solid #000;
      overflow:hidden;
    }
    
    .inner{
      width:100%;
      position:absolute;
      bottom:20px;
    }
    
    ul{
      padding-left: 32px;
       white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      
    }
    li{
      padding: 8px 14px;
        height: 36px;
        margin-right: 10px;
      display:inline-block;
    }

### 公众号 ###

欢迎大家关注我的公众号： 石马上coding，一起成长  
![石马上coding][coding]

[20200727141538928.png]: /images/20230208/843d2f80301e40bcb3a487b21660a2a8.png
[coding]: /images/20230208/4759017bb49e431683f252921110eaca.png