vue怎么实现滚动条隐藏但有滚动效果？

Question

vue怎么实现滚动条隐藏但有滚动效果

Answer 1

其实可以配置 scrollbar 属性，但是会有兼容新问题，除了 chrome 支持外其他的浏览器并不支持。 👉 使用CSS隐藏元素滚动条
所以一般的觉方式是在滚动容器外部再套一个高度比滚动容器高度小大概 20px ~ 30px 的容器，然后做 overflow:hidden 这样滚动条就会被超出隐藏掉。

具体实现可以简介社区中的这篇文章中的思路 👉 CSS如何隐藏滚动条,又不失去滚动功能( 两行代码 )
或者我之前在其他问答中使用过的一个Demo 👉 Codepen demo

Answer 2

1.解决不出现滚动条却有滚动效果,我们得先明白滚动条出现的原因--》也就是宽高溢出了，然后会蹦出来一个滚动条,所以你要么把滚动条给干掉，正如楼上所说，或者你可以自定义出一个滚动效果,比如你在需要滚动的盒子外面套一个盒子给它来一个overflow:hidden,然后给外层盒子添加一个鼠标滚轮事件的监听,阻止该盒子的默认事件，通过自定义scrollTop的位移来实现自定义的滚动效果

Answer 3

// 去除滚动条显示
.drawerBox::-webkit-scrollbar{display:none}

Answer 4

//隐藏div的滚动条
//兼容ie，谷歌、火狐
div{
    scrollbar-width:0;
    -ms-overflow-style:none;
    &::-webkit-scrollbar
        {
            width:0;
            height:0
        }
}

Answer 5

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

::前面也可以制定元素容器，也可以不指定;不指定的情况下应用于所有元素

Answer 6

除了使用::-webkit-scrollbar样式外， 还有个更老的解决方案，就是外层套个div使用overflow:hidden. 内层的还是overflow:auto. 通过外层div margin遮挡掉内部的滚动条来达到效果，优点是兼容性高，缺点是麻烦缺乏语义