React中监听鼠标滚轮事件

2023-11-08

设计师要求首页轮播图加上滚动监听,撸完代码揪出来个demo。
const rdom = require('react-dom');  

class Hello extends React.Component {
  render() {

  handleScroll(e) {
    const ele = rdom.findDOMNode(this);
    if (e.nativeEvent.deltaY <= 0) {
      /* scrolling up */
      if(ele.scrollTop <= 0) {
        e.preventDefault();
        console.log(scrolling up)
      }
    } 
    else
    {
      /* scrolling down */
      if(ele.scrollTop + ele.clientHeight >= ele.scrollHeight) {
        e.preventDefault();
        console.log(scrolling down)
      }
    }
  }
    return (
        <div className='parentScroll'  onWheel={(e) => this.handleScroll(e)}>
            <div className='childScroll'>
                Some text blah
            </div>
            <div className='childScroll'>
                 Hi text blah
            </div>
        </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React中监听鼠标滚轮事件 的相关文章

  • 为什么 JavaScript base-36 转换看起来不明确

    我目前正在编写一段使用 Base 36 编码的 JavaScript 我遇到了这个问题 parseInt welcomeback 36 toString 36 看来要回归了 welcomebacg 我在 Chrome 开发者控制台和 Nod
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • React - 无法读取未定义的属性[重复]

    这个问题在这里已经有答案了 通常 当我单击子组件中的菜单项时 它会调用 this handlesort 这是一个本地函数 处理排序从我的父组件中获取 onReorder 属性 onReorder 调用名为 reOrder 的本地函数 它设置
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 摆脱node-jsx

    在我的 NodeJS 应用程序的路由器中 我想渲染一个 React 应用程序 由于它没有被浏览器化 并且已反应 因此它返回unexpected token lt 构建时出错 我发现如果我require node jsx install 它不
  • 问题:为什么React Native Video不能全屏播放视频?

    我正在react native 0 57 7 中为android和ios创建一个应用程序并使用反应本机视频 https github com react native community react native video播放上传到的视频
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示
  • 如何在 Swiper 实例之外使用 useSwiper?

    我在用着用于 React 的滑动器 https swiperjs com react显示一些幻灯片 我一直坚持使用外部按钮在幻灯片 上一张和下一张 之间导航 刷卡器有一个useSwiper hook https swiperjs com r

随机推荐

  • Vue 3的Diff算法相比Vue 2有哪些具体的改进?

    Vue 3的Diff算法相比Vue 2进行了一些具体的改进 主要包括以下几个方面 Patch flag Vue 3引入了Patch flag的概念 用于标记组件在更新过程中的一些特殊情况 例如组件的props发生变化或只需要强制更新等 这样
  • Ubuntu下Linux系统文件恢复

    Linux 常见数据恢复工具 Linux 系统中有许多工具能帮助我们完成误删数据的恢复工作 较常见的工具有 foremsot extundelete scalpel 这三种命令行工具以及 testdisk 和 phtorec 这两种字符终端
  • Github桌面版托管本地静态web网页

    Github桌面版托管本地静态web网页 1 注册GitHub账号 记录注册账户名称 2 下载GitHub客户端 GitHub desktop 下载 3 网页端创建仓库 仓库名为 账户名称 github io 设置GitHub page 查
  • Linux修改文件出现错误E45:“readonly” option is set(add ! to override)退出不了vim

    出现这种错误时会退出不了vim 那么出现这种错误的原因有 1 该错误为当前用户没有权限对文件修改 2 该文件没有正确保存退出 正在打开状态 关闭后再保存 3 若该文件所有都关闭 提示有的人没有关闭 则删除该文件的临时文件则可正常打开 修改
  • Spring 事务传播行为

    如果对事务不了解的可以先看下 我的上一篇文章 数据库事务详解 概述 一般SSH的项目都是使用三层架构即Controller Services DAO Spring 的事务一般都在Services定义 而Controller DAO都不定义事
  • LVGL入门 常用的几个命令(个人笔记)

    前言 学习LVGL的过程中 常常知道有这个命令 也知道大概怎么用 但总想不起来命令叫什么 在整个库中找也显得麻烦 搞得每次写程序还要翻之前的Demo 所以在这里将学习过程中用到的命令 存放在这里 方便再使用的时候方便的找到命令名字 lv o
  • 深度学习速成(11)BiLSTM

    BiLSTM即双向长短期记忆网络 Bidirectional Long Short Term Memory BiLSTM 最早由J rgen Schmidhuber和Sepp Hochreiter等人于1997年在论文 Long short
  • 激光雷达与相机外参标定(附open3d python代码)

    现在的激光雷达与相机的标定程序基本都是Ubuntu框架下面的 并且都是C 代码 需要安装的依赖也比较复杂 于是自己写了一个python版本的标定程序 依赖非常简单 Windows系统也可以运行 并且代码简单一个文件搞定 符合python简单
  • 2.2 面向对象(分类和static)

    1 案例驱动模式 1 1案例驱动模式概述 理解 通过我们已掌握的知识点 先实现一个案例 然后找出这个案例中 存在的一些问题 在通过新知识点解决问题 1 2案例驱动模式的好处 理解 解决重复代码过多的冗余 提高代码的复用性 解决业务逻辑聚集紧
  • uniapp小程序,根据小程序的环境版本,控制的显页面功能按钮的示隐藏

    需求 根据小程序环境控制控制页面某个功能按钮的显示隐藏 下面是官方文档和功能实现的相关代码 实现上面需要 用到了uni getAccountInfoSync uni getAccountInfoSync 是一个 Uniapp 提供的同步方法
  • qnap 文件传输服务器,如何将 QNAP NAS 作为 RADIUS 服务器使用?

    QNAP NAS 的远程身份验证拨入用户服务 RADIUS 服务器功能可以为要连接并使用网络服务的计算机提供集中身份验证和授权管理 系统用户帐户仅支持 PAP EAP TLS PAP 和 EAP TTLS PAP 身份验证 仅支持 WPA
  • 使用Electron打包Http地址为应用程序

    使用Electron打包Http地址为应用程序 NodeJS环境安装 下载NodeJS 安装NodeJS 配置镜像地址 配置npm镜像地址 配置Electron镜像地址 编辑项目配置文件 编辑package js文件 编辑main js文件
  • react路由根据用户角色设置权限校验

    react路由根据用户角色设置权限校验 前言 做前端项目的时候 我们经常会有这样的情况 一个系统会有多种权限不同的角色 每个角色都有自己能访问的模块角色间能访问的模块 页面 并不完全相同 因此我们经常会有根据不同的角色管理不同的给 每个路由
  • 学习SVG(九)裁剪和蒙版

    裁剪 使用clipPath元素创建裁剪区域 区域内的部分显示 区域外的隐藏
  • WIN11任务栏出现空白,卡任务栏的解决办法

    WIN11全球出现BUG 具体现象是卡任务栏 任务栏显示空白 一直卡着 出现今天这个问题的原因是微软授时服务器出现故障 所以按Ctrl Alt Delete进入任务管理器 左上角新建任务输入 control exe 打开控制面板 在控制面板
  • Advanced Level 1001 A+B Format (20 point(s))

    PAT甲级系列 PAT Advanced Level 文章目录 英文 Title Input Specification Output Specification Sample Input Sample Output 中文 题目 输入格式
  • Java List<Map<String, Object>> 排序

    name key值 List
  • TypeError: decoding str is not supported

    打开文件报错 修改后代码如下 fi open D 文件下载 sensor txt rb fo open D 文件下载 earpa001 txt wt for line in fi ls str line encoding utf 8 str
  • /var/run/yum.pid 已被锁定,PID 为 8843 的另一个程序正在运行

    原因 yum处于锁定状态中 解决方法 强制关掉yum进程 直接在终端运行命令将该文件删除 然后再次运行yum即可 命令 rm f var run yum pid
  • React中监听鼠标滚轮事件

    设计师要求首页轮播图加上滚动监听 撸完代码揪出来个demo const rdom require react dom class Hello extends React Component render handleScroll e con