CSS隐藏浏览器滚动条

隐藏滚动条的同时还需要支持滚动

方法1：计算滚动条宽度并隐藏起来

在内容外层加一个div并设置overflow:hidden，里面的div向右移动了17个像素，刚好等于滚动条的宽度

<div class="outer-container">
    <div class="inner-container">
    	......
    </div>
</div>

.outer-container{
	width: 360px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.inner-container{
	position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

方法2：css隐藏滚动条

通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用

类名(注意后面没有空格)::-webkit-scrollbar {
  display: none;
}

<template>
  <div class="lateral-sliding">
    <div class="lateral-sliding-item" v-for="(item,index) in items" :key="index">
      <div class="each-img"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Scroll",
  data() {
    return {
      items: 5
    };
  }
};
</script>
 
<style scoped>
.lateral-sliding {
  margin-top: 20px;
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
}
/* 隐藏横向滚动条 */
.lateral-sliding::-webkit-scrollbar {
  display: none;
}
.lateral-sliding-item {
  display: flex;
  margin-right: 8px;
  background-color: yellow;
}
.each-img {
  width: 100px;
  height: 150px;
}
</style>