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
目录
相关文章
夏天49597
|
7天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架，由 Vercel 开发。本文从基础概念出发，逐步探讨 Next.js 的常见问题、易错点及解决方法，并通过具体代码示例进行说明，帮助开发者快速构建高性能的 Web 应用。
夏天49597
31 10
技术混子
|
6天前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板：D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代，将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识，然后通过一个实际的项目案例，详细阐述了如何将两者结合使用，并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者，这篇文章都将为你提供宝贵的洞见和实用技能。
技术混子
20 5
源码星辰
|
1月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域，选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular，探讨它们各自的特点、开发场景、优缺点，并提供选择框架的建议。
源码星辰
39 6
明月何时照我还呀
|
2月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么？
React 和 Vue.js 框架的区别是什么？
明月何时照我还呀
39 11
源码星辰
|
2月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库，它提供组件化结构、数据绑定、路由管理和状态管理等功能，帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular，能够提高开发效率并促进团队协作。
源码星辰
74 4
六卿
|
2月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏，包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑，提供了详细的代码和注释。
六卿
27 0
原生JavaScript+canvas实现五子棋游戏_值得一看
游客zi3qmblbcdexu
|
2月前
|
前端开发 JavaScript
React的事件与原生事件的执行顺序？
React的事件与原生事件的执行顺序？
游客zi3qmblbcdexu
53 4
极简博客
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成：React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成，以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧，展示了如何利用Express.js处理路由和静态文件服务，同时在React、Vue和Angular中构建用户界面，帮助开发者快速掌握前后端分离的开发方法，实现高效、灵活的Web应用构建。
极简博客
50 3
玄学酱
|
Web App开发 JavaScript 前端开发
React.js 新手村教程
本文讲的是React.js 新手村教程，正如你能从标题猜到的，这篇文章的目标是给那些有很少编程经验的读者的。比如，像我这样的人：因为迄今为止，我才探索了编程世界6个月。所以，这将是一篇新手村教程！ 你只需要拥有对 HTML 和 CSS 的理解，以及基本的 JavaScript（JS）知识就能看懂本文。
玄学酱
1817 0
答神~
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
答神~
345 0

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    javascript模拟实现继承，继承一次父类模板和原型对象
  • 3
    Rhino 是一个完全使用Java语言编写的开源JavaScript实现。Rhino通常用于在Java程序中，为最终用户提供脚本化能力。它被作为J2SE 6上的默认Java脚本化引擎。
  • 4
    Javascript之旅——第四站：parseInt中要注意的坑
  • 5
    JS语法作用域与词法作用域
  • 6
    在JavaScript面向对象编程中使用继承(3)
  • 7
    web worker 是运行在后台的 JavaScript，不会影响页面的性能。
  • 8
    一看就会的Next.js App Router版 -- Routing（上）（一）
  • 9
    YY游戏云的angular js实践总结
  • 10
    HTML，javascript，Json数据在线格式化工具
  • 1
    【React】React原理面试题集锦
    126
  • 2
    发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
    97
  • 3
    【React】Hooks面试题集锦
    195
  • 4
    react保姆级搭建新项目
    100
  • 5
    使用React、TypeScript和Ant Design构建现代化前端应用
    175
  • 6
    使用React、Redux和Bootstrap构建社交媒体应用
    89
  • 7
    深入探究React：前端开发的利器
    78
  • 8
    【前端】深入了解React JSX语法及实例应用
    66
  • 9
    利用React Hooks优化前端状态管理
    88
  • 10
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    693

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月