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

 

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

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

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

先来看看效果图：

 

  
    

      


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


        

        
我是一个item
          
我是一个item
          
我是一个item
          
我是一个item
          
我是一个item
          
我是一个item
          
我是一个item
          
我是一个item
          
      
      
    
    
    
  

 

.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，一起成长