利用overflow做点击滚动功能

最近遇到个需求，是做一个类似滚动条的功能，研究了一下，发现了一个比较简单的方法，就记录一下。

如图：

黄色框里面的是功能按钮，点击up 里面蓝色盒子上移 显示对应位置的内容 点击down蓝色盒子下移，需求就是做一个滚动条类似的功能，但是不能出现滚动条，用鼠标滚动轮滚动也不行，只能点击按钮去滚动。

一开始我想着很简单的功能，就用定位去写，点击按钮去改变top的值就好，但是如果数据到底了或者数据到最上面了，继续点击按钮还是会移动。这里可以去获取蓝色盒子的高度去控制，但是我这个人对计算东西不敏感，总会出问题，就想着有没有其他办法。

然后就用overflow-y：scroll 出现滚动条，然后隐藏滚动条，但是隐藏了滚动条后，滚动鼠标的滚动轮，蓝色盒子会上下滚动，所以这样写也跟需求不一样。

最后我就在想，盒子本来高度就被撑开了，overflow scroll 会出现滚动条功能，那我用overflow：hidden 溢出隐藏 然后js控制scrollTop的值应该也可以实现滚动条才对，想到这里立马就去试了试，果然，overflow hidden 溢出隐藏后，控制scrollTop的值也是能控制滚动条的。然后这个功能就这样实现了。。。

代码如下：

ul{
  height: 55px;
  overflow: hidden;
}

// 导航下移
      navDown(){
        let nav = document.getElementById("tableNav")
        nav.scrollTop += 20
      },
      // 导航上移
      navUp(){
        let nav = document.getElementById("tableNav")
        nav.scrollTop -= 20
      },

原理我也不知道为什么，有大佬指点一下吗?...