vue隐藏滚动条

最新推荐文章于 2024-07-28 23:45:50 发布

yuuunfryan

最新推荐文章于 2024-07-28 23:45:50 发布

阅读量1.8k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45770902/article/details/124970819

版权

刚开始学习vue做样式的时候不太熟悉，会觉得那个滚动条很丑所以

在style里写入这些就好啦！

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yuuunfryan

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue2 - 完美去掉隐藏 elementui 侧边导航菜单出现的滚动条，局部去掉 el-menu 菜单显示的滚动条

高级前端工程师

03-27

5638

element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜单栏滚动条，vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去

vue.js-div滚动条隐藏但有滚动效果的实现方法

11-29

组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐 var evt = window.event || arguments[0]

参与评论您还未登录，请先登录后发表或查看评论

vue 设置和隐藏滚动条

淘气の小狼人的博客

12-02

3799

vue 设置和隐藏滚动条

vue项目隐藏浏览器自带的滚动条

weixin_63124815的博客

01-10

1135

【代码】vue项目隐藏浏览器自带的滚动条。

vue实现隐藏浏览器右侧滚动条功能

热门推荐

在写作的路上持续输出。

03-11

1万+

一🐸 前端浏览器滚动条优化

基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

10-17

在本文中，我们探讨了如何使用Vue框架实现滚动条滚动到指定位置时，页面上的数字进行tween动画特效。tween动画是一种在两个值之间创建平滑过渡效果的动画技术。Vue作为一个流行的前端框架，提供了丰富的功能来实现...

VUE模块滚动条实现鼠标进入显示，移除隐藏

ʚ菲菲的博客ɞ

06-30

2025

VUE模块滚动条实现鼠标进入显示，移除隐藏设置模块样式，overflow设置为hidden .dper_table{ margin-top: 18px; margin-bottom: 10px; height: 90%; overflow-y: hidden; //关闭滚动条 overflow-x: hidden; //关闭滚动条 } 给该模块样式设置伪类 :hover ，在伪类中设置需要悬浮显示的滚动条为auto

vue手机端隐藏滚动条

Heartnottowake的博客

04-07

3200

在app.vue中的style插入 :-webkit-scrollbar { width: 0 !important; } ::-webkit-scrollbar { width: 0 !important;height: 0; } 这样滚动条就全局隐藏了，如果有需求想要开启滚动条，可以使用下里面方法： overflow-x: scroll; white-space: nowrap; 方法不错，纳入收藏 ...

vue中全局滚动条隐藏

PinelliaLogic的博客

05-11

380

vue中全局滚动条隐藏。

vue2隐藏浏览器右侧滚动条

m0_67880202的博客

04-12

884

3.在全局css/scss/less中配置。右侧滚动条就消失啦~

vue设置及隐藏滚动条

qq_35139533的博客

09-15

7852

1、设置滚动条： overflow-x: scroll; white-space: nowrap; 2、隐藏滚动条： ::-webkit-scrollbar { width: 0 !important; } ::-webkit-scrollbar { width: 0 !important;height: 0; }

vue，css实现元素隐藏或取消滚动条

哆啦A梦的百宝袋的博客

01-13

8417

vue和html适用的实现元素隐藏或取消滚动条，原理是css的功能。

基于vue的滚动条组件之----element隐藏组件滚动条scrollbar使用

weixin_30654583的博客

05-16

811

在项目中，总是需要用到滚动条，但windows浏览器默认的滚动条是很丑的，为了页面美观，可以考虑优化滚动条样式。 vue Element UI官方文档上并没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的，可查看源码。 element-ui隐藏组件scrollbar的使用 1 <el-scrollbar></el-scrollbar> 将会出现滚动...

Vue移动端——隐藏滚动条

weixin_63743161的博客

08-05

1755

个人练手记录：Vue移动端——隐藏滚动条。

vue 实现页面内滚动条滑动时按钮隐藏，滚动条停止时按钮显示

xjh的博客

12-05

963

做到一个功能页面有个区域可以上下左右滑动，当滚动条上下或者左右滑动时按钮需要向下一动，隐藏起来，当滚动条停止滚动后，按钮在从下到上显示出来。1.获取可滚动条元素并增加监听事件。我这里的场景是在app内需要次功能。3.页面的显隐按钮及样式。2.触发滚动后逻辑函数。

vue实现滚动条下滑时隐藏导航栏，上滑时显示导航栏

Zwwxd666的博客

07-28

395

vue iframe隐藏滚动条

最新发布

09-14

Vue.js框架本身并不能直接控制iframe元素的滚动条，因为它是一个用于构建用户界面的库，并非DOM操作底层的解决方案。但是，你可以通过JavaScript或者CSS来管理iframe的滚动条。要在Vue组件中隐藏IFrame的滚动条，可以尝试这样做： 1. 使用JavaScript: ```javascript export default { methods: { hideScrollbars(iframe) { const options = { allowScroll: 'no', style: `overflow-y: hidden; scrollbar-width: none;` }; if (window.VueIframeScrollbar) { // 如果你使用了第三方库如VueIframeScrollbar VueIframeScrollbar.show(iframe.$el, options); } else { iframe.style.cssText = `overflow-y: hidden; scrollbar-width: none;`; // 或者直接设置style属性 iframe.addEventListener('load', function() { if (!this.contentDocument || !this.contentDocument.body) return; this.contentDocument.body.style.overflow = 'hidden'; this.contentDocument.body.style.WebkitOverflowScrolling = 'touch'; // 移除WebKit滚动条样式 }); } }, showScrollbars(iframe) { iframe.style.cssText = ''; // 恢复默认滚动条 if (window.VueIframeScrollbar) { VueIframeScrollbar.hide(iframe.$el); } else { iframe.removeEventListener('load', onContentLoaded); // 移除事件监听 } } } } ``` 2. 使用CSS（仅当支持伪元素`::webkit-scrollbar`时）: ```css .iframe-without-scrollbar::-webkit-scrollbar { display: none; } .iframe-without-scrollbar body { -ms-overflow-style: none; /* IE 和 Edge */ scrollbar-width: none; /* Firefox */ } ``` 然后在模板中绑定事件，比如点击按钮控制显示或隐藏： ```html <button @click="hideScrollbars(iframe)">隐藏滚动条</button> <button @click="showScrollbars(iframe)">显示滚动条</button> <iframe ref="iframe" :src="src"></iframe> ```