vue ref scrollTop不起作用

最新推荐文章于 2024-05-31 11:18:25 发布
最新推荐文章于 2024-05-31 11:18:25 发布
阅读量1.8w 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011649976/article/details/78435911
版权

工作小结：

当我们在vue中使用ref，来多列控制设置scrollTop或者scrollTo时，若无效，不妨试试 

this.$nextTick(() => {
this.$refs.viewBox[key].scrollTo( 0,' 34px');
})
多数原因是加在顺序问题导致设置无效


白云随风飘
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的滚动条插件实现代码
12-29
这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者... <div class=vue-scroll-w ref=vueScroll> <div class=vue-scroll-c xss=removed> <slot></slot> <div c
vue 使用鼠标滚动加载数据的例子
10-16
4. **判断滚动到底部**: 在 `handleScroll` 方法中，通过比较滚动条的当前位置 `scrollTop` 加上可视窗口的高度 `clientHeight` 是否大于内容区域的总高度 `scrollHeight` 来判断是否已经滚动到底部。如果满足条件，...
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目 设置scrollTop不起作用（解决方法及原因）
weixin_41695009的博客
05-26 7703
1、场景恢复 activated() { this.$refs.viewBox.scrollTop = 100 console.log(this.$refs.viewBox.scrollTop) } 控制台显示 0 2、解决办法 activated() { this.$nextTick(() => { this.$refs.viewBox.scrollTop = 100 }) console.log(this.$refs.viewBox.scrollTop) } 控制台
vue3中scrollTo不生效解决方案
最新发布
ygzhzzy的博客
05-31 443
其它随便，至于是为什么，我的理解是 overflow:hidden;是超出部分隐藏，它是强制你的高度就只能是你设置的大小，不管你怎么滚它就怎么大点，所以把它设为别的或注释掉试试呢；直接说原因，是css样式overflow引发的window.scrollTo();overflow一定不能为hidden。还有一点，记得设置高度。
vue设置scrollTop不起作用
雩风季白的博客
07-30 1812
今天遇到一个小问题vue设置滚动条高度一直为0。解决方法放在下边。 在这里一定要加上this.$nextTick()方法，否则document.querySelector(“.article”).scrollTop的值永远为0，不会赋值成功的 methods: { gundong() { this.time = '60' //时间 this.article = document.querySelector('.article')//获取dom this.aHeight = this.artic
vue中滚到页面最底部scrollTop不生效，解决
michael1991117的博客
06-02 2264
1.滚动的div必须是父级，2.父级需要设置overflow：auto和高度，3.子级高度比父级高度高。
vue scrollTop 失效的问题
weixin_42307129的博客
10-22 1808
methods: { setTop(){ this.$nextTick(() => { //第一种方式在vue里面是没有用的 document.getElementById('scrollBox').scrollTop = 500; //下面这个才可以设置top值 let con...
vue封装swiper代码实例解析
10-16
在Vue.js应用中，Swiper是一个非常流行的滑动轮播组件，它提供了丰富的动画效果和交互功能。在本文中，我们将深入探讨如何在Vue中封装Swiper，通过具体的代码实例来帮助你理解和实现这一过程。 首先，我们需要安装...
vue页面设置滚动失败的解决方案(scrollTop一直为0),vue页面无法滚动
李十三的博客
03-09 4124
这就涉及到一个知识点的误区: "让页面滚动到指定位置这个需求,不一定是让整个window滚动,在路由嵌套的vue页面中,window可能始终是没有滚动的,产生滚动条的是一个设置了固定高度,且子元素的高度超出了他本身的元素. 这时候,元素才会产生滚动条,而你一股脑的给window设置滚动条位置,window也蒙了"可是发现给某个div设置该属性后，一致为0。怎么看我这个方法适不适合你,你可以尝试打印滚动条的位置,页面滚动后,再次打印滚动条的位置,如果一直为0的话,那我的的这个方法就可以解决你遇到的问题.
scrollTop设置不起效果的几种原因
smallNut的博客
01-17 1万+
今天在写需求的时候遇到一个要将表格的滚动条在进行路由跳转时固定的操作，然后没想到居然在scrollTop这个属性的设置上栽了坑，关于此问题的原因网络上的解释也五花八门，各不相同 这里我们以下图demo为例，给大家解释一下设置scrollTop属性设置无效可能会遇到的几个原因 1.父，子元素需设置高度，并且子元素高度必须大于父元素 这一点应该很好理解，如果子元素高度始终小于父元素，那么无论怎么设置scrollTop的值都不可能大于0 2.父元素需设置overflow: scroll 或 overflow-y：
vue3中scrollTop不生效的问题
m0_61469746的博客
10-28 5790
昨天在写一个v3+ts的移动端项目时 有一个点击tab栏跳转至页面相对应位置的功能 ，使用scrollTop修改dom的位置不生效。dmeo._value.scrollTop= 0 //0为滚动到顶部。const demo= ref(null) // 这行代码用来获取dom。最后查出来问题为需要设置scroll的盒子没有设置高度。
scrollTop不生效的原因解决方法
热门推荐
前端小师姐迪迪_的博客
02-21 1万+
scrollTop 设置 不生效；scrollTop 一直为0；
Vue项目中scrollTop一直为0该如何解决
trabecula_hj的博客
03-03 1565
Vue项目中scollTop一直为0该如何解决1. 用$refs方法获取页面实例(app.vue)2.监听页面滚动事件并将获取到的页面实例赋值给el3.最后点击返回顶部时将el页面的scrollTop属性设为0 项目要求：点击返回顶部页面回到最顶部 1. 用$refs方法获取页面实例(app.vue) 将获取到的el(app页面实例)存储进store中 <div id="app" ref="app"> <router-view/> </div> mounted(
利用ref和scrollTo实现页面滚动失效
qiaoqiaoBigBoss的博客
02-25 1976
记录遇到的问题 场景：想要页面点击出触发函数实现页面的滚动 遇到的问题： 函数成功执行，代码也没问题，但是页面就是没有实现滚动 js代码如下： scrollToBottom() { //滚动 var topPublicity = this.$refs.topPublicity; window.setTimeout(() => { Math.animation(document.documentElem
VUE 通过ref 控制滚动条到底部&顶部
u013095204的博客
11-21 4400
开发业务中需要通过按钮点击增加输入栏，当过多时，新增的输入栏在最底部，这时直接控制滚动到底部可省去用户操作。
Vue 中让页面滚动到指定位置 scrollTop 为 0 或不生效可能的原因
weixin_44383533的博客
07-20 3820
注意⚠️并不是在你想滚动的元素上面设置ref是需要在你想滚动的父元素上面添加ref。注意要添加this.$nextTick否则元素可能会获取不到。否则可能ref会一直滚动不到你想滚动的位置。使用ref获取dom。...
vue 上拉加载 @scroll 并解决 scrollTop失效问题
Brian_Jing的博客
07-14 547
废话不多说 上代码 <div class="content" ref="scroll" @scroll="handleScroll"> <child :file-list="fileList"></child> </div> handleScroll:function() { var that = this; clearTimeout(this.timer) this.timer = setTimeout(()=>{ ...
解决设置scrollTop不起作用
weixin_45700321的博客
04-23 2630
我操作是 $(#el-tree)的目标，给它设置了半天scrollTop始终不生效，因此排查问题所在，才知道需要找到滚动条目标层级，进行动态设置scrollTop，问题解决。首先场景是一个异步树：支持模糊搜索，当搜索到结果时，会有选中效果，但是搜索的结果可能会超出树的显示范围，因此需要手动滑动滚动条到选中位置。但是呢，树节点太多，无法及时到目标位置，因此根据选中位置，将滚动条滑动到目标位置，设置scrollTop。注意：offsetTop 就是当前选择节点的属性，以及注意overflow设置为 auto。
vue scrolltop 不起作用
06-10
如果你在使用 Vue.js 中的 scrollTop 方法无法起作用，可能是因为你没有正确地绑定到正确的元素上。一些常见的解决方案包括： 1. 确认你的绑定元素是否正确，通常是一个带有滚动条的元素，比如一个容器 div。 2. 确保你的绑定元素具有正确的样式属性，例如 `overflow: auto` 或 `overflow-y: scroll`，以确保滚动条可见。 3. 如果你使用的是 Vue 2.x，可以考虑使用 refs 来引用滚动元素，然后在方法中调用 scrollTop 方法，例如： ``` <template> <div ref="scrollContainer" class="scroll-container"> <!-- your content here --> </div> </template> <script> export default { methods: { scrollToTop() { this.$refs.scrollContainer.scrollTop = 0; } } } </script> ``` 在这个例子中，`scrollContainer` 是一个具有 `scroll-container` 类的 div 元素，你可以在方法中调用 `scrollToTop` 方法来滚动到顶部。 希望这些解决方案能够帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值