PC端内容横向滚动效果

前言

想要实现的效果如下

具体操作

思路

首先要有一个大的div，里面包裹的内容可以左右移动。开始以为是很复杂的操作，查了相关资料发现很简单，只需要操作css，都不需要自己写js

html代码

class="scrollBox"的块就是最外层的包裹块；class="blockDiv"的块是通过v-for循环产生多个

<div v-if="showBlock" class="scrollBox">
	<div v-for="item in blockOptions" class="blockDiv">
	div>
div>

css代码

注意：.blockDiv类display本来想用inline-block结果发现不行，但发现必须使用inline-table才能保证子模块水平排布

  .scrollBox {
    height: 500px;
    overflow-x: scroll;
    /* 内容会被裁剪，会以滚动条显示 */
    overflow-y: hidden;  /* 超出内容不可见 */
    white-space: nowrap;  /* 不换行 */
    /* 文本不会换行，会在同一行上继续，直到遇到
为止 */
  }
  .blockDiv{
    width:340px;
    margin-right:10px;
    display: inline-table;/* 不换行 */
  }