AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

react原生js爬楼

2023-12-13 97
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： react原生js爬楼

912b4958bd0b44f8a1ce549367747ad2.png

aca77e0d0c2e490f99eb45997286b76d.png

完整代码👆

首先需要给我们需要滚动的元素设置固定的高度然后设置overflow:auto 设置为超出显示滚动条

之后我们给这个元素设置滚动事件 当我们在这个元素中滚动的时候触发

0579eea7dffe4dd78f783490225c74e8.png

然后在方法中我们通过document.querySelector获取到该元素然后通过该元素的clientHeight和scrollTop两个属性来实现爬楼效果

7155bd7cfcc0461baac056f8329a57f2.png

在这里需要明确两点 一：clientHeight是可视区的高度这个高度是不会变的也就是在没有开始滚动的时候的高度 然后scrollTop则是滚动高度他是不会计算clientHeight的高度的所以这两个元素相加就是我们滚动的总高度然后根据这个总高度来设置就可以了


最后效果👇

8acb80fc441f40c7a8f6a69eb3109e84.gif

文章标签：
JavaScript
前端开发
关键词：
JavaScript react
react JavaScript
React Native js
React Native原生
JavaScript原生
DazingAndBusy
目录
相关文章
34789737
|
20天前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用，主要是配置antd
在React中结合Ant Design与媒体查询，通过less变量和响应式断点动态调整`@font-size-base`，实现多分辨率下字体自适应，提升跨设备体验。
34789737
44 2
游客mass6jalwg5qm
|
6月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端，再到利用 APIPost 高效测试 API，适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式，还涉及数据库连接和前后端数据交互。通过实际代码示例，助你快速上手并优化应用性能。
游客mass6jalwg5qm
218 6
李游Leo
|
9月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式，包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析，如模拟点击事件、派发自定义数据加载事件和实现提示框系统，帮助开发者掌握这些方法在实际开发中的应用，提升灵活性与兼容性。
李游Leo
295 3
夏天49597
|
11月前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表，涵盖基础概念、安装步骤、代码示例及常见问题解决方法，帮助开发者轻松实现数据可视化。
夏天49597
314 11
夏天49597
|
11月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架，由 Vercel 开发。本文从基础概念出发，逐步探讨 Next.js 的常见问题、易错点及解决方法，并通过具体代码示例进行说明，帮助开发者快速构建高性能的 Web 应用。
夏天49597
506 10
技术混子
|
11月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板：D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代，将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识，然后通过一个实际的项目案例，详细阐述了如何将两者结合使用，并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者，这篇文章都将为你提供宝贵的洞见和实用技能。
技术混子
295 5
源码星辰
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域，选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular，探讨它们各自的特点、开发场景、优缺点，并提供选择框架的建议。
源码星辰
281 6
Java时光
|
11月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue：一场性能与易用性的较量
JavaScript框架React vs. Vue：一场性能与易用性的较量
Java时光
253 0
蒋星熠Jaxonic
|
13天前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践：提升函数组件能力的终极指南
🌟蒋星熠Jaxonic，前端探索者。专注React Hooks深度实践，从原理到实战，分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能，共赴技术星辰大海！
蒋星熠Jaxonic
118 2
React Hooks深度解析与最佳实践：提升函数组件能力的终极指南
sunyalei
|
5月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序？
如何使用组合组件和高阶组件实现复杂的 React 应用程序？
sunyalei
241 68

热门文章

最新文章

  • 1
    React Hooks深度解析与最佳实践：提升函数组件能力的终极指南
  • 2
    手把手搭建自定义 CI/CD 服务器，实现 Node.js 部署自动化
  • 3
    js小数运算出现的问题(精度丢失)及解决办法-亲测有效
  • 4
    JavaScript：无处不在的编程语言
  • 5
    Nest.js控制器深度解析：路由与请求处理的高级特性
  • 6
    TypeScript vs. JavaScript：技术对比与核心差异解析
  • 7
    JavaScript：无处不在的Web语言
  • 8
    JavaScript：构建动态世界的引擎
  • 9
    JavaScript：构建动态Web的核心力量
  • 10
    JavaScript：构建动态网络的引擎
  • 1
    如何在React.js中使用Shadcn/UI
    408
  • 2
    react js 处理表单（ form ）的2个例子
    112
  • 3
    深入理解React.js的五大优点及其对前端开发的影响
    436
  • 4
    深入理解React.js的两大优点及其对前端开发的影响
    177
  • 5
    如何学习React.js？
    178
  • 6
    【React】Hooks面试题集锦
    509
  • 7
    使用React、TypeScript和Ant Design构建现代化前端应用
    580
  • 8
    使用React、Redux和Bootstrap构建社交媒体应用
    242
  • 9
    深入探究React：前端开发的利器
    210
  • 10
    【前端】深入了解React JSX语法及实例应用
    206

    • 相关课程

    更多
  • JavaScript入门与实战
  • React 入门与实战
  • React 入门教程开发文档
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    阿里云无影云电脑免费使用_免费申请教程