前端：实现手机左右滑动效果

需求：手机可以左右滑动，显示商品或者div信息

原理：建立两个盒子，一个是可以看到的手机屏幕盒子，一个是自己设定好的盒子，左右滑动，只显示与手机屏幕盒子交集的部分

代码：

      
X
      

        

        
商品1
      
      

        

        
商品2
      
      

        

        
商品3
      
      

        

        
商品4
      
      

        

        
商品5
      
      

        

        
商品6
      
      

        

        
商品7
      
    

样式：

#close-icon {
  position: fixed;
  font-size: 2vh;
  padding-left: 96vw;
  margin-top: 1vw;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

#good-style {
  position: fixed;
  top: 72vh;
  width: 100%;
  height: 28vh;
  background-color: rgba(24, 24, 24, 0.8);
  white-space: nowrap; //不换行
  overflow-y: scroll; 
  //   -webkit-overflow-scrolling: touch;

  #good-li {
    width: 30vw;
    height: 24vh;
    // float: left;
    margin-top: 2vh;
    margin-left: 2vw;
    display: inline-block;

    #good-img {
      width: 26vw;
      height: 18vh;
      float: left;
      margin-top: 2vh;
      margin-left: 2vw;
      background-color: blanchedalmond;
    }

    p {
      text-align: center;
      padding-top: 19vh;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }
}

#good-style::-webkit-scrollbar {
  //去除滚动条
  width: 0;
  height: 0;
  display: none;
}

实现效果：