容器隐藏滚动条,并保持滚动

时间:2024-04-11 18:48:40

容器隐藏滚动条,并保持滚动

目标:有时候做的页面需要隐藏滚动条,但是又想容器能滚动。

  1. ::-webkit-scroll设置滚动条样式,针对浏览器有限
  2. "套娃模式"隐藏掉目标容器滚动条

容器隐藏滚动条,并保持滚动

实现:inner是元素的容器,被outter包裹,并且在outter中移动,这样outter就有了滚动条。这时,用container包裹,并设置超出高度隐藏overflow:hidden;

注意:在Mac电脑上还是会有点问题,滚动条会显示在outter底边之上

outter设置padding-bottom: 20px; 足以在任何浏览器中将滚动条顶出container了