在带有 React 的 Cordova iOS 上惯性/动量滚动期间要监听哪个事件

2024-04-05

我有一个通过 cordova/phonegap 在 iOS 上运行的 React 应用程序。

在一个组件中,我有一个工具栏,一旦滚动经过它,它就会粘在屏幕顶部:

<div id="content">Some stuff in here</div>
<div id="tool-bar">
    <div class="tool">Tool 1</div>
    <div class="tool">Tool 2</div>
</div>
<div id="some-stuff-below-toolbar">Stuff</div>

你明白了。

每当用户滚动时,就会计算 Y 位置,如果它低于偏移量,工具栏就会获得一个“粘性”类,并通过 CSS 将其固定在顶部:

ReactJS:

componentDidMount() {
    document.addEventListener('scroll', this.updateScrollY);
    document.addEventListener('touchmove', this.updateScrollY);
}

updateScrollY() {
    const current_y = window.pageYOffset || document.documentElement.scrollTop;

    this.setState({...this.state, current_y});
}

render() {
    let classNames = '';
    if(this.state.current_y >= this.state.offset) {
        classNames = 'sticky';
    }

    return(...some JSX...
        <div id='tool-bar' className={classNames}> ... etc more JSX);  
}

CSS:

.sticky {
    position: fixed;
    top: 0px;
    left: 0px;
}

现在,这一切都适用于 Chrome/Safari,但在 iOS/Cordova 上,动量滚动期间不会触发滚动事件。因此,如果用户在按住屏幕的同时滚动超过偏移限制,那很好,因为touchmove事件不断触发。但是,如果用户滚动一点,释放屏幕,并且动量/惯性滚动使视图滚动超过偏移量,则在滚动结束之前不会发生任何事情(因为然后scroll事件被触发)。

问题:

是否有一个单独的事件我可以收听,或者是否有 Cordova 使 javascript 在惯性/动量期间执行的设置 滚动?


设置间隔()

我还尝试在 touchend 上设置一个间隔(用户停止滚动/触摸)并稍后将其删除,但似乎在动量/惯性滚动期间,根本没有运行任何 JavaScript:setInterval 在此期间不会执行。


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在带有 React 的 Cordova iOS 上惯性/动量滚动期间要监听哪个事件 的相关文章

  • 频繁绘制 CGPath 时的性能

    我正在开发一个将数据可视化为折线图的 iOS 应用程序 该图被绘制为CGPath在全屏自定义中UIView最多包含 320 个数据点 数据经常更新 图表需要相应地重新绘制 刷新率为 10 秒就很好了 到目前为止很容易 然而 我的方法似乎需要
  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问
  • JS 保留以零结尾的小数[重复]

    这个问题在这里已经有答案了 在JavaScript中 是否可以 锁定 十进制数 以保留以零结尾的 浮点数 例如 我有 2 个不同的数字 如下所示 伪代码 let a 1 0 let b 1 00 a b true should be fal
  • iOS 循环对象的属性并添加操作

    我有一个具有几个类似属性的类 UISliders 我想添加用户开始和结束使用每个滑块时的操作 每个滑块都将链接到同一个选择器 因此我考虑只是迭代它们 而不是编写 10 个几乎相同的代码块 问题是 最有效的方法是什么 我尝试过这样的事情 在运
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
  • 如何在 Web 服务器上设置 gzip 压缩?

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我
  • 使用 JQuery 禁用和启用所有超链接

    我有以下禁用所有超链接的内容 但在事件发生后我想再次启用它们 我该如何执行此操作 a click function return false 我认为这不仅仅是将其设置为 true 那么简单 谢谢大家 不要以这种方式绑定 点击 处理程序 而是
  • 在现有 iOS 应用程序中集成 React-native(0.40.0) 后找不到 Yoga/Yoga.h 头文件

    在我的 Swift iOS 应用程序中集成 React Native 后 我无法构建 yoga Yoga h file cannot be found 我已经浏览了文档 查看了react native github页面 检查了类似问题的SO
  • WhatsApp 显示警告“此项目无法共享。请选择其他项目。”对于 iOS 应用程序。

    我正在开发一个 iOS 应用程序 在该应用程序中 我有社交共享功能 并且社交共享功能使用深度链接来共享 URL 该网址共享对于所有应用程序都运行良好 除了WhatsApp 它会显示一个警报弹出窗口 此项目无法共享 请选择其他项目 以下是我的
  • 为什么我的视图仍然以横向呈现?

    我的视图是由导航控制器控制的 因此我将导航控制器支持的方向设置为明确的纵向和纵向UpSideDown 这可以工作 但是如果调用视图时前一个视图处于横向状态 它将以横向方式呈现并保持横向状态 直到设备旋转 如何防止这种情况发生 这是我的代码
  • 为什么我收到“在嵌套函数中通过 this 对类字段进行潜在无效的引用访问”错误

    在普通 JS 中 我的代码可以正常工作 对于这种情况 我想组件化我的Wall类应该在浏览器中显示用户上传的图像 同样 这在 vanilla JS 中正常工作 但在 JSX 中不起作用 我得到了一个potentially invalid re
  • 呃!尝试将包发布到 npm 时出现 403

    我正在尝试将包发布到 npm 您可以在此处查看存储库 https github com biowaffeln mdx state https github com biowaffeln mdx state 我登录到 npmnpm login
  • 类中可以有生成器 getter 吗?

    我的意思是吸气剂是发电机 我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • 如何在画布上所有其他内容后面绘制图像? [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前
  • 分发内部业务 IOS 应用程序

    我遇到了 IOS 应用程序分发的一个令人困惑的部分 因此 我需要简单细分一下我的限制 即仅将我的应用程序分发给我的员工 同事或任何被视为 内部 的人 这是表明我不希望该应用程序出现在应用程序商店中的另一种方式 我的情况是我为几家公司开发 他
  • 苹果推送通知在生产中不起作用

    我们完全陷入困境 请帮忙 我和我的团队制作了一个 iPhone 应用程序 这是我们第一次在 iOS 上尝试 一切都很好 直到我们提交应用程序并在应用程序商店上可用为止 推送通知服务无法正常工作 我在网上搜索并尝试根据人们的建议仔细检查我们的
  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2
  • 以角度访问窗口 TemplateUrl 内的范围

    我的模式有一个 windowTemplateUrl 如下 div class modal fade div class modal dialog div class modal content square btn div div div
  • 为什么使用 iPhone 或 iOS 设备在“iframe”中查看“position:fixed”时不起作用?

    我研究过 stackoverflow 似乎position fixed在 iOS 移动设备的 iframe 中 https stackoverflow com questions 15874910 position fixed and if

随机推荐