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

react原生js爬楼

2023-12-13 48
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
进步`于辰
|
15天前
|
移动开发 前端开发 JavaScript
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面，开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面，涉及多种特效实现，如动态图片切换和人物聚合效果。作品源码已上传至CSDN，视频效果可在CSDN预览。
进步`于辰
25 0
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
夏天49597
|
24天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架，由 Vercel 开发。本文从基础概念出发，逐步探讨 Next.js 的常见问题、易错点及解决方法，并通过具体代码示例进行说明，帮助开发者快速构建高性能的 Web 应用。
夏天49597
60 10
技术混子
|
23天前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板：D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代，将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识，然后通过一个实际的项目案例，详细阐述了如何将两者结合使用，并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者，这篇文章都将为你提供宝贵的洞见和实用技能。
技术混子
46 5
源码星辰
|
1月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域，选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular，探讨它们各自的特点、开发场景、优缺点，并提供选择框架的建议。
源码星辰
44 6
明月何时照我还呀
|
2月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么？
React 和 Vue.js 框架的区别是什么？
明月何时照我还呀
42 11
源码星辰
|
2月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库，它提供组件化结构、数据绑定、路由管理和状态管理等功能，帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular，能够提高开发效率并促进团队协作。
源码星辰
118 4
六卿
|
2月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏，包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑，提供了详细的代码和注释。
六卿
37 0
原生JavaScript+canvas实现五子棋游戏_值得一看
极简博客
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成：React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成，以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧，展示了如何利用Express.js处理路由和静态文件服务，同时在React、Vue和Angular中构建用户界面，帮助开发者快速掌握前后端分离的开发方法，实现高效、灵活的Web应用构建。
极简博客
56 3
土木林森
|
16天前
|
前端开发 JavaScript 开发者
颠覆传统：React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库，以其虚拟DOM机制和组件化设计，成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容，帮助开发者更好地理解和使用React。
土木林森
46 9
游客5fdji2pvmf8888
|
1月前
|
前端开发
深入解析React Hooks：构建高效且可维护的前端应用
本文将带你走进React Hooks的世界，探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践，文章旨在帮助你充分利用Hooks来提高开发效率，编写更简洁、更可维护的前端代码。我们将通过实际代码示例，深入了解useState、useEffect等常用Hooks的内部工作原理，并探讨如何自定义Hooks以复用逻辑。
游客5fdji2pvmf8888
62 1

热门文章

最新文章

  • 1
    解决React报错Encountered two children with the same key
  • 2
    next.js博客搭建_react-markdown渲染内容（第三步）
  • 3
    基于React的简易REST API客户端设计与实现
  • 4
    使用React、Redux和Bootstrap构建社交媒体应用
  • 5
    React Server Components手把手教学（三）
  • 6
    「React进阶」 React全部api解读+基础实践大全(夯实基础2万字总结)（React Hooks）
  • 7
    React工作47:react中initialValue和value不能一起定义
  • 8
    js/Jquery 对像不存在或为空的原因
  • 9
    【javascript】Promise/A+ 规范简单实现 异步流程控制思想
  • 10
    js正则表达式语法
  • 1
    【React】React原理面试题集锦
    131
  • 2
    发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
    100
  • 3
    【React】Hooks面试题集锦
    212
  • 4
    react保姆级搭建新项目
    109
  • 5
    使用React、TypeScript和Ant Design构建现代化前端应用
    190
  • 6
    使用React、Redux和Bootstrap构建社交媒体应用
    96
  • 7
    深入探究React：前端开发的利器
    87
  • 8
    【前端】深入了解React JSX语法及实例应用
    71
  • 9
    利用React Hooks优化前端状态管理
    98
  • 10
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    731

    • 相关课程

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

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)