vue怎么实现滚动条隐藏但有滚动效果
1.解决不出现滚动条却有滚动效果,我们得先明白滚动条出现的原因--》也就是宽高溢出了,然后会蹦出来一个滚动条,所以你要么把滚动条给干掉,正如楼上所说,或者你可以自定义出一个滚动效果,比如你在需要滚动的盒子外面套一个盒子给它来一个overflow:hidden,然后给外层盒子添加一个鼠标滚轮事件的监听,阻止该盒子的默认事件,通过自定义scrollTop的位移来实现自定义的滚动效果
//隐藏div的滚动条
//兼容ie,谷歌、火狐
div{
scrollbar-width:0;
-ms-overflow-style:none;
&::-webkit-scrollbar
{
width:0;
height:0
}
}
除了使用::-webkit-scrollbar样式外, 还有个更老的解决方案,就是外层套个div使用overflow:hidden. 内层的还是overflow:auto. 通过外层div margin遮挡掉内部的滚动条来达到效果,优点是兼容性高,缺点是麻烦缺乏语义
8 回答4.7k 阅读✓ 已解决
6 回答3.4k 阅读✓ 已解决
5 回答2.8k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
4 回答2.3k 阅读✓ 已解决
4 回答2.8k 阅读✓ 已解决
其实可以配置
scrollbar
属性,但是会有兼容新问题,除了chrome
支持外其他的浏览器并不支持。 👉 使用CSS隐藏元素滚动条所以一般的觉方式是在滚动容器外部再套一个高度比滚动容器高度小大概
20px ~ 30px
的容器,然后做overflow:hidden
这样滚动条就会被超出隐藏掉。具体实现可以简介社区中的这篇文章中的思路 👉 CSS如何隐藏滚动条,又不失去滚动功能( 两行代码 )
或者我之前在其他问答中使用过的一个Demo 👉 Codepen demo