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

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

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

代码：

<div id="good-style">
      <div id="close-icon" @click="show = false">X</div>
      <div id="good-li">
        <div id="good-img"></div>
        <p>商品1</p>
      </div>
      <div id="good-li">
        <div id="good-img"></div>
        <p>商品2</p>
      </div>
      <div id="good-li">
        <div id="good-img"></div>
        <p>商品3</p>
      </div>
      <div id="good-li">
        <div id="good-img"></div>
        <p>商品4</p>
      </div>
      <div id="good-li">
        <div id="good-img"></div>
        <p>商品5</p>
      </div>
      <div id="good-li">
        <div id="good-img"></div>
        <p>商品6</p>
      </div>
      <div id="good-li">
        <div id="good-img"></div>
        <p>商品7</p>
      </div>
    </div>

样式：

#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;
}

实现效果：