如何使用mouseWheel 滚轮事件来监听鼠标滚动时显示滚动条，不滚动隐藏滚动条，有会的吗？

如何使用mouseWheel 滚轮事件来监听鼠标滚动时显示滚动条，不滚动隐藏滚动条，有会的吗？可以请教一下吗

    <div :class="navShow?'box':''" style="height: 100%;background-color: green;overflow: auto;" ref="box">
      <div style="height:900px; width: 150px;background-color: pink;margin-left: 20px;">1div>
    div>

 mounted() {
    window.addEventListener('mousewheel', (event) => {
      this.top = event.deltaY
      console.log(this.top);
    })
  },
  watch: {
    top(newValue, oldValue) {

      if (newValue > 0) {
        if (newValue > oldValue) {
          this.navShow = false
          console.log('向下滚动')
        } else {
          this.navShow = true
          console.log('向上滚动')
        }
      }
    }

  }

隐藏滚动条的样式已写了 就是不知道怎么控制，显示和隐藏这个过程