09-去掉盒子滚动条但是还能滚动

需求：我们想让盒子可以滚动，但又不想看到其滚动条，如何做？

<template>
  <div style="width: 500px; margin: 0 auto">
    <div class="box">
      <ul>
        <li v-for="(item, i) in list" :key="i">{{ item.name }}</li>
      </ul>
    </div>
    <br />
    <div class="box2">
      <ul>
        <li v-for="(item, i) in list" :key="i">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "zs", value: "123" },
        { name: "ls", value: "456" },
        { name: "ww", value: "789" },
        { name: "ww", value: "789" },
        { name: "ww", value: "789" },
        { name: "ww", value: "789" },
        { name: "ww", value: "789" },
        { name: "ww", value: "789" },
        { name: "ww", value: "789" },
        { name: "ww", value: "789" },
        { name: "ww", value: "789" },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
// 正常有滚动条
.box {
  width: 300px;
  border: 1px solid #999;
  ul {
    list-style: none;
    width: 100%;
    height: 200px;
    overflow: auto;

    li {
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #ddd;
    }
  }
}
// 隐藏了滚动条
.box2 {
  overflow: hidden; //关键点1
  width: 300px;
  border: 1px solid #999;
  ul {
    list-style: none;
    width: calc(100% + 17px); //关键点2
    height: 200px;
    overflow: auto;

    li {
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #ddd;
    }
  }
}
</style>