javascript - js如何隐藏浏览器滚动条却能保持内容滚动？

Question

尝试了
document.documentElement.style.overflowY = 'hidden';
隐藏了滚动条但内容不能滚动了。
或是

        ::-webkit-scrollbar {
            width: 0px;
        }

但是只有 chrome 能用。

请问有没有办法隐藏浏览器滚动条却能保持内容滚动？

还有能不能通过JS获取或者更改 滚动条（不是scrollHeight，而是那个bar的高度）的高度？

Answer 1

ul {
  overflow: hidden;
  overflow-x: scroll;
  /* 显示x轴滚动条*/
  white-space: nowrap;
  /* 菜单列不换行 */
  background-color; gray;
}
ul::-webkit-scrollbar {
  display: none
 /* 隐藏滚动条，但依旧具备可以滚动的功能 */
}
li {
  display: inline-block;
  /* 纵向排列 */
  width: 40px;
  text-aling: center;
  font-size: 14px;
}

参考

Answer 2

可以写用css的，overflow:hidden;

Answer 3

给一个 p 设固定高度及 ovetflow: auto，其内容就会滚动了

Answer 4

你这样的要求要结合多个p来做，父p固定高度，子p为内容高度，鼠标在p上滚轮滚动事件监听，滚动一次的距离是一个固定的值，然后看滚动次数计算和设置子p顶部距离父p顶部的top值

大概思路就是这样

Answer 5

使用这个插件
jquery-custom-content-scroller
可以自定义滚动条的样式，当然隐藏也是可以的

Answer 6

::-webkit-scrollbar {

        display: none;
    }