如何去掉浏览器页面的滚动条

weixin_45681173

已于 2022-06-23 14:24:52 修改

阅读量1.1k

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-06-23 11:59:18 首次发布

本文链接：https://blog.csdn.net/weixin_45681173/article/details/125424358

版权

在Vue和ElementUI的项目中，为隐藏首页滚动条，可以使用内联样式和外部CSS结合的方式。对于webkit内核浏览器，通过`::-webkit-scrollbar`选择器设置宽度和高度为0实现。对于火狐浏览器，引入jQuery.nicescroll库并应用样式使其滚动条不可见。此方法确保了不同浏览器下滚动条的隐藏效果。

摘要由CSDN通过智能技术生成

项目场景：

在用vue+ElementUI做网站时，要求去掉首页的滚动条

解决方案：

1、在vue页面里允许使用多个标签
2、::-webkit-scrollbar用于是webkit内核的浏览器

<style lang="scss" scoped>
...........
</style>
<style>
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>

<!--针对火狐浏览器滚动条消失-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
//针对火狐浏览器滚动条消失
        $(".dom").niceScroll({cursorborder:"",cursorcolor:"rgba(0,0,0,0)",boxzoom:true});