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

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

<template>
  <div style=" 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 {
   300px;
  border: 1px solid #999;
  ul {
    list-style: none;
     100%;
    height: 200px;
    overflow: auto;

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

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