获取VUE滚动条scrollTop (解决高度一直为0)

最新推荐文章于 2024-06-05 17:56:57 发布
最新推荐文章于 2024-06-05 17:56:57 发布
阅读量1.9k 收藏 6
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KeLiSiTingOne/article/details/121791780
版权

vue.js javascript 前端

今天写一个功能要用到滚动条高度  试了好多网上的方法获取到都是0  

话不多说上代码!!!!!!!

代码如下:

效果图如下:

简单记录一下

K-TOP117810
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue的滚动条插件实现代码
12-29
这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如下 代码如下 <div class=vue-scroll ref=vueScrollW> ...
解决vue无法设置滚动位置的问题
11-30
问题描述 在实现锚点定位的时候发现无法设置滚动条的位置。 在Vue中，使用 document.body.scrollTop=952 无法设置滚动条的高度。 document.body.scrollTop一直是0 原因 因为vue的页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 解决方案 document.documentElement=956 总结 以上所述是小编给大家介绍的解决vue无法设置滚动位置的问题 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，
Vue项目中scrollTop一直为0该如何解决
trabecula_hj的博客
03-03 1590
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(
vue3中 window绑定scroll事件滚动页面获取不到e.target.scrollTop
最新发布
A_Brave的博客
06-05 536
想要监听页面中的滚动，然后获取滚动距离实现一些功能，发现event参数中获取不到e.target.scrollTop（印象中以前使用这个获取的），发现e.target中根本没有scrollTop这个参数。因为window对象target的属性上是没有scrollTop（这个e.target.scrollTop应该是在特定元素中获取到的，没有测试，我也忘了）
关于vue获取滚动条距离顶部距离scrollTop一直为0的问题
qq_45127577的博客
03-11 3230
vue获取scrollTop的值
vue中监听滑动（并解决滑动scrollTop一直为0问题）
jiangjunyuan168的博客
04-19 3518
一、代码实现 1、监听整个窗口（window）的滑动 在mounted钩子函数里添加： mounted() { window.addEventListener('scroll',this.handleScroll,true) } 然后在methods里创建绑定的方法： methods: { handleScroll(){ let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
vue js document.documentElement.scrollTop获取一直为0的解决方法
daishaochen的博客
09-15 6056
vue js document.documentElement.scrollTop获取一直为0的解决方法，vue封装组件后，常常是在组件里面继续轮滑，而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度，所有一直是0。
vue监听滚动scroll一直是0_vue里监听页面滚动的问题
weixin_39614750的博客
12-20 810
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth(包括边线的宽);网页可见区域高： document.body.offsetHeight(包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高...
vue移动端监听滚动条高度的实现方法
10-18
在Vue.js移动端开发中，有时我们需要监听滚动条的高度来实现特定的交互效果，例如当用户滚动到页面的一定位置时，头部导航栏变为固定定位。本文将详细介绍如何在Vue中实现这种功能。 首先，我们需要知道在...
vue 中滚动条始终定位在底部的方法
10-18
在使用Vue框架开发前端页面时，经常需要处理列表滚动以及保持滚动条在特定位置的需求。例如，在聊天应用、实时消息显示或者日志查看等场景中，使滚动条保持在视图的底部，以便用户始终看到最新的内容，是非常常见的...
scrollTop获取一直为0的解决方法(vue3开发h5)
wanghao31的博客
02-25 2185
document.documentElement.scrollTop获取一直为0的解决
vue页面设置滚动失败的解决方案(scrollTop一直为0),vue页面无法滚动
李十三的博客
03-09 4183
这就涉及到一个知识点的误区: "让页面滚动到指定位置这个需求,不一定是让整个window滚动,在路由嵌套的vue页面中,window可能始终是没有滚动的,产生滚动条的是一个设置了固定高度,且子元素的高度超出了他本身的元素. 这时候,元素才会产生滚动条,而你一股脑的给window设置滚动条位置,window也蒙了"可是发现给某个div设置该属性后，一致为0。怎么看我这个方法适不适合你,你可以尝试打印滚动条的位置,页面滚动后,再次打印滚动条的位置,如果一直为0的话,那我的的这个方法就可以解决你遇到的问题.
怎么得到scrollTop
weixin_30276935的博客
05-02 120
我们学习一个事件 ： 页面滚动效果 window.onscroll = function() { 页面滚动语句 } 谷歌浏览器 和没有声明 DTD <DOCTYPE > ： document.body.scrollTop; 火狐 和其他浏览器 document.documentElement.scrollTop; ie9+ 和 最新浏...
使用Vue或React子组件无法获取页面滚动条高度
qq_35512761的博客
08-14 824
let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
vue窗口无限滚动最下方，scrollTop一直为0无法设置解决
qq_37063886的博客
08-27 3190
最近在用vue写聊天小功能的时候，用到element-ui隐藏组件el-scrollbar 在写对话窗无限滚动的时候遇到无法滚动到底的问题 解决了很久才解决。 现在记录总结在这里 网上大多给的解决方案是 按照是否设置页面DTD let scroll = document.getElementById(‘block’)//后面三种写法的基础 用 （1）document.Element.scrollTop = scroll.scrollHeight （2）scroll.scrollTop = scroll.sc
vue监听滚动scroll一直是0_vue监听滚动事件
weixin_39844880的博客
12-20 611
vue中监听滚动事件，然后对其进行事件处理，一般有：1. 滚动到顶部吸附； 2. 根据滚动的位置激活对应的tab键(锚链接tab键)这两种方式的处理都是可通过监听scroll来实现mounted(){window.addEventListener('scroll',this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理}处理方法1. 滚动到顶...
vue2中使用better-scroll，获取不到正确的元素高度
JunJiu0420的博客
04-01 222
之前做项目使用插件better-scroll，一直获取不到正确的content高度，使用nextTick也不行，可以使用定时器解决，但注意，定时器的时间不能设置为0，否则也是不起作用的，如下图，上面的代码就可以获取到正确的高度，下面的就不行，原因还不知道为啥，有知道的大神可以帮忙解答一下吗，感谢。
vue设置scrollLeft 一直为0的原因
a393007511的博客
11-12 4711
问题描述 <div class="icontent" ref="icontent" > <div class="box" ref="cbox" > <img /> </div> </div> img 是position: absolute;绝对定位 icontent，cbox是 position: rela...
vue 获取当前滚动条高度
05-31
你可以通过以下代码获取 Vue 中当前滚动条的高度： ``` computed: { scrollTop() { return document.documentElement.scrollTop || document.body.scrollTop; } } ``` 其中 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 分别用于兼容不同浏览器的滚动条高度获取方式。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值