容器隐藏滚动条,并保持滚动
目标:有时候做的页面需要隐藏滚动条,但是又想容器能滚动。
- ::-webkit-scroll设置滚动条样式,针对浏览器有限
- "套娃模式"隐藏掉目标容器滚动条
实现:inner是元素的容器,被outter包裹,并且在outter中移动,这样outter就有了滚动条。这时,用container包裹,并设置超出高度隐藏overflow:hidden;
注意:在Mac电脑上还是会有点问题,滚动条会显示在outter底边之上
outter设置padding-bottom: 20px; 足以在任何浏览器中将滚动条顶出container了