移动端列表页面添加v-infinite-scroll后，页面出现两个滚动条，设置overflow: hidden无效

最新推荐文章于 2024-01-18 08:05:08 发布

Shirly的口口

最新推荐文章于 2024-01-18 08:05:08 发布

阅读量809

点赞数

文章标签： html css css3 vue

本文链接：https://blog.csdn.net/moxucheng_li/article/details/111143772

版权

移动端列表页面添加v-infinite-scroll后，页面出现两个滚动条，设置overflow: hidden无效

设置最外层bodyBox为overflow: hidden;width: 100%;
height: 100%;，想去除最外层滚动条，无效，滚动条还是存在两个
在这里插入图片描述

<el-tabs v-model=“activeName” @tab-click=“handleClick”>
用户管理
配置管理
角色管理
定时任务补偿

{{ i }}

如何设置只有内部一个滚动条？

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Shirly的口口

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

【无限滚动加载数据】—infinite-scroll插件的使用

︿(￣︶￣)︿

05-14

9万+

网上对于infinite-scroll插件使用的例子不多。但由于它的出现，鼓吹了瀑布流形式的页面展示方式，所以不得不了解了解这种新的分页方式。官网上有对infinite-scroll的详细描述，但一般人即使看未必看得懂，看得懂未必就调试成功。所以借今晚有点时间，把跑通的例子供大家借鉴。一.无限滚动概念首先，它是基于Jquery的，另外还要明白无限滚动的概念：无限滚动的实现原理就是当你在

vue获取滚动条滚动位置

aGreetSmile的博客

12-11

7372

记一次踩的坑，百度的很多方法都不能用需求：上滑到全部、热门位置，全部、热门按钮固定，下拉到所在位置跟随下来上图：我给html,body给了高度100%，获取body的滚动条位置一直是0；给当前页面给高度100%； .beat_home{ height:100%; overflow:hidden; overflow-y:scro...

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

出现两个滚动条的解决方式

最新发布

qq_42891199的博客

01-18

955

不要给 el-option 的高度设置为 1200px, 太长了, 导致 el-option 的父容器容纳不下 el-option。给 el-option 的高设置为 100%后的效果如下。第二个滚动条是因为 el-option 太长导致的。第一个滚动条是因为 el-tree 太长导致的。

使用了element UI页面出现两个滚动条

m0_56302604的博客

03-19

3336

当 el-main里面内容过多时，会出现多一个滚动条：通过检查发现这里 el-main 的overflow用的是 auto ：之前我设置了一个global.css文件用来设置一些全局的样式，所以可以在该文件里添加如下代码： global.css /* 解决内部滚动条 */ .el-main { overflow:visible; } ...

第一次在模块下vue-infinite-scroll正常，能实现懒加载，切换到其他模块后回来当前模块vue-infinite-scroll失效，滚动到最底端不再生效

zewu_chen的博客

09-28

4224

问题：最近接受了离职同事的代码，发现一个bug，第一次在模块下vue-infinite-scroll正常，能实现懒加载。但是，当切换到其他模块后回来当前模块vue-infinite-scroll失效，滚动到最底端不再生效。场景：由于信息安全的原因，代码实现原理大致如下： <template> <div> <div v-if="curtPag...

elementui InfiniteScroll 无限滚动，在移动端会出现的问题

qq_53026081的博客

04-13

1538

我们在做pc时，一般的数据都会使用表格进行数据的分页处理，但是当到移动端时，我们对数据的处理一般都会使用列表的显示方式。这样的开发模式我们就会使用到elementui InfiniteScroll 无限滚动。根据文档这部分，写了我的代码，开始长下面这样子…结果发现了一个问题，就是进入页面之后像是 infinite--disabled和infinite-scroll-immediate没有生效似的，页面疯狂调用onLoad函数。

移动端滚动问题

12-05

例如，我们可能需要自定义滚动条样式、阻止页面其他元素的响应，或者实现滚动加载更多内容等效果。 JavaScript提供了一些方法来处理这个问题。其中，最常用的解决方案之一是使用`overflow: hidden`和`position: ...

跑马灯特效--文字滚动

11-23

1. 容器设置：首先，创建一个固定宽度的容器，使用`overflow: hidden;`隐藏超出部分的内容。 ```css .marquee { width: 100%; /* 根据需求调整 */ overflow: hidden; } ``` 2. 内容设置：将需要滚动的文字放入一...

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

ʚ菲菲的博客ɞ

06-30

2011

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

文字列表无缝向上滚动

12-09

这种效果通过编程技术实现，使得文字列表在到达顶部时不是突然消失，而是无缝地从底部重新出现，形成一种循环滚动的效果，增加网站的互动性和吸引力。实现这种效果的关键在于JavaScript和CSS的配合。在给定的文件...

elementUI InfiniteScroll 无限滚动一次加载到底不受禁用限制问题解决

guosenliu的博客

04-20

3447

解决方法: 删除官方样例中的style="overflow:auto" ElementUI的官方样例 <div class="infinite-list-wrapper" style="overflow:auto"> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled"> <li v-for="i in count"

v-infinite-scroll 上拉加载请求两次

weixin_43845550的博客

07-13

2859

在接口返回数据的时候 infinite-scroll-disabled置为false <div class="page-content taskcontent" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" > </div loadMore: function() { if (this.page

【vue-infinite-scroll滚动多次】

LPLIFE的博客

04-22

3140

参考：element 需要在每一次异步加载的开始时禁用这个滚动加载，等异步加载完再打开。否则默认是一直滚动就自动提前触发好几次。

vue中一个页面垂直方向出现两条滚动条

m0_64411343的博客

08-24

1111

vue中一个页面垂直方向出现两条滚动条

v-infinite-scroll不触发问题

qq_51682771的博客

07-24

2206

1.一次请求的数据不能占满整个container，默认加载页面时会不断请求数据，直到overflow外面的容器，但点击最新时，清除数据，不能再overflow，所以就算滚动到底也无法触发。初次加载页面，默认综合的时候可以无限滚动，当点击最新的时候失效。

v-infinite-scroll无限滚动无法触发

fxxkingpineapple的博客

03-12

7230

element的v-infinite-scroll滚动到底部时无法触发，查了许久，官方文档和度娘查到的都是说在添加 v-infinite-scroll元素的父元素上设置overflow:auto即可，但是依旧无法生效凑巧将overflow:auto加到子元素上就生效了 ...

解决双滚动条

Zing_ing的博客

07-26

232

解决方案：找到父元素设置overflow:hidden;，由于使用了element-ui的滚动条，子元素不需要设置overflow:auto;，如果没有使用的话，子元素需要设置overflow:auto;子元素的滚动条设置了element-ui的滚动条。

【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效的解决方案

一个努力学习的程序猿

10-20

7058

Vue 项目使用 InfiniteScroll 无限滚动组件在部分浏览器失效，转而使用 JS 去实现无限滚动及其相关问题的解决方案

写一个dv-scroll-board鼠标移入信息显示完整的demo

04-20

好的，以下是一个简单的dv-scroll-board鼠标移入信息显示完整...以上代码实现了一个可滚动的消息列表，并通过鼠标移入显示完整信息的效果。当鼠标移入某条消息时，该消息将显示完整内容；当鼠标移出时，完整内容消失。