使用Vue或React子组件无法获取页面滚动条高度

最新推荐文章于 2024-04-27 12:02:33 发布

原创最新推荐文章于 2024-04-27 12:02:33 发布 · 889 阅读

0 ·

CC 4.0 BY-SA版权

博客围绕使用Vue或React子组件获取页面滚动滚动条高度展开，聚焦于前端开发中利用这两个框架子组件实现特定功能，在前端页面交互等场景有重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

濒危程序猴

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

优化h5的滚动功能：在vue和react中使用better-sroll插件的踩坑笔记

world12312312的博客

05-21

1027

使用better-scroll插件实现滚动效果和功能

react 中ant design table 表格组件滚动条监听方法

Mrluog的博客

12-09

3972

react 中ant design table 表格组件滚动条监听方法

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

解决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无法设置滚动位置的问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小

页面无法获取滚动条的高度

aksaber的博客

09-13

1713

页面无法获取滚动条的高度，值为0 虽然网上有很多解决无法获取滚动条的高度，正常来说只需要做个兼容即可：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop 这可以解决通常遇到的情况，但是我遇到的情况是，个别浏览器（搜狗浏览器、微信浏览器、小米自带浏览器）仍然无法获取滚动条的高度，值...

div overflow scroll_VUE中@scroll失败的真相

weixin_39636718的博客

11-24

567

vue不能老实的 @scroll真的是一大心病，今天就来去了这颗心病先看MDN上关于scroll事件冒泡的描述：element的scroll事件不冒泡, 但是document的defaultView的scroll事件冒泡，意思大概是监听的目标元素(element)是一个div的话，scroll事件不会冒泡到上一级，而document.defaultView(在浏览器上就是window)会冒泡(这里...

vue2中使用better-scroll，获取不到正确的元素高度

JunJiu0420的博客

04-01

314

之前做项目使用插件better-scroll，一直获取不到正确的content高度，使用nextTick也不行，可以使用定时器解决，但注意，定时器的时间不能设置为0，否则也是不起作用的，如下图，上面的代码就可以获取到正确的高度，下面的就不行，原因还不知道为啥，有知道的大神可以帮忙解答一下吗，感谢。

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

KeLiSiTingOne的博客

12-08

2067

今天写一个功能要用到滚动条高度试了好多网上的方法获取到都是0 话不多说上代码!!!!!!! 代码如下: 效果图如下: 简单记录一下

大屏可视化项目之vue3-seamless-scroll无缝滚动组件（一）——基本使用_vue seamless scroll官网

热门推荐

MingL520的博客

07-17

8万+

文档描述本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码并基于前端进阶和面试的需求总结了常用插件和js算法以及html/css和js热点面试题因为csdn不可以有外链所以答案链接在评论区！！！ Vue面试题生命周期函数面试题 1.什么是...

vue监听scroll的坑的解决方法

08-29

主要介绍了vue监听scroll的坑的解决方法，现在分享给大家，也给大家做个参考，希望给有同样经历的人帮助

用代码说明height, clientHeight, offsetHeight, scrollHeight 区别及为什么height值有时取不到

ForMyQianDuan的博客

11-30

1537

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 {

（react）设置scrollTop无效的原因及解决方法

weixin_51719919的博客

03-11

1万+

一、项目的需求描述不停的请求后端日志，输出到页面上，当用户不做任何操作时，动态显示日志，即放日志的盒子里面内容滚动到最底部；当用户触发了滚动事件查看历史日志时，盒子不再滚动到最底部，随着用户的滚动显示对应的日志，且确保不会中断请求日志，当用户再次滚动到页面最底部并且不再做任何操作时候，再次实现盒子里面内容动态滚动到最底部（类似聊天界面，只要你不翻看聊天记录，就会滚动显示最新消息）二、设置scrollTop的方法 1. 原生 HTML 中使用 JS 直接修改方法一：使用scrollTo函数来设置滚动条的

vue 中获取页面卷进去的宽度或高度

罗布泊丶镜像人的博客

01-10

3651

vue项目中，获取TMD页面卷进去的高度总失败，比如： let top = document.documentElement.scrollTop || document.body.scrollTop; console.log(top)// 0; 沃特法克，放在原生写法里，该是多少就打印多少；于是乎，打印了一下window对象。发现有个window.pageYOffset 属性，以前没见过...

React 判断滚动到底部

忘川

05-05

1万+

html <div ref={e => (this.scroll = e)}></div> js componentDidMount() { if (this.scroll) { this.scroll.addEventListener("scroll", e => { const { clientHeigh...

react原生函数实现页面滚动到一定高度后显示悬浮按钮

yan的秘密基地

10-12

879

需求背景：当页面很长的时候，我们希望当滑过某一按钮后，它能在接下来的区域以一个小的悬浮按钮的形式固定在页面右侧，类似于一键回到顶部那种按钮的效果，不过这个按钮的事件我们可以随意添加，不一定是要用来回到页面顶部。整体逻辑就是监听页面滚轮高度当达到某个值以后将按钮的display值置为block 让他展示出来用的是react hook

js scrollHeight不同浏览器获取方式

MissLone的博客

09-28

847

最近做了一个项目，发现iframe自适应时获取scrollHeight异常。因为本人习惯用谷歌当做测试浏览器，所以在项目完成时用ie浏览器上跑的时候，出现了调用 onresize函数body高度一直在增加，只增不减，当时还以为是onresize在ie浏览器下不兼容问题，测试好多遍，最后才确定了是scrollHeight获取方式问题。具体代码 let iframe = parent.document.querySelector('#iframe')//f父级iframeID if (i

js、react、vue里滚动到底部加载数据和滚动到顶部实现（js监听滚动事件，到底部请求接口）

从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

03-11

4823

前言：最近在做一个项目，一个列表展示原本是分页器，点击下一页，请求接口。但是业务说需要改成滑倒底部，加载数据。一、实现过程 1.html+js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

react 列表滚动完整思路：

qq_43789598的博客

03-23

736

react列表滚动

全面解析：如何获取和使用各种滚动条

- **React的滚动条操作：** 在React中，可以通过state管理滚动位置，并使用类组件或函数组件的ref属性来直接操作DOM滚动条。 - **Vue的滚动条操作：** Vue中可以使用v-bind绑定滚动事件，并利用计算属性或方法来控制...