滚动踩的几个坑

最新推荐文章于 2025-10-29 23:26:07 发布
原创 最新推荐文章于 2025-10-29 23:26:07 发布 · 239 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html #javascript

本文探讨了在JavaScript中处理滚动事件时遇到的浏览器兼容性问题，指出不能直接使用contentH == (scrollTop + viewH)的判断，而应该采用contentH - (scrollTop + viewH) < 10的方式以确保在不同浏览器中的一致性。同时，介绍了如何通过定时器实现平滑滚动效果，并强调监听元素滚动必须设置overflow属性且监听对象不能是body。
  1. 不能写成contentH == (scrollTop + viewH)，存在兼容性问题，不同的浏览器。if(contentH - (scrollTop + viewH) < 10 ){}写成这样更加合理。

2。scrollTop实现动画的缓慢滚动，这个不是css无法使用动画函数，所以只能通过定时器来实现。

  1. 要监听某个元素的滚动，必须满足两个条件，第一：该元素必须设置了overflow，第二：该元素不能是body，否则使用$("#xx").scroll()监听不到滚动。
uniapps项目 scroll-into-view 开启动画后fixed乱跑 跟着容器滚动的问题
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
06-16 217
这个问题其实在 Web 开发中也经常遇到，而在uniapp项目中更容易踩雷，毕竟你看不到框架在背后加了什么样式，只有浏览器 / 小程序实际表现出问题你才会意识到。希望这篇文章能帮你避坑。如果你也踩过类似的坑，欢迎评论区分享你的处理方式！
EasyClick 简单的滑到底判断
EC_AK47的博客
06-26 1177
/** *@param x1 x1坐标 *@param y1 y1坐标 *@param x2 w2坐标 *@param y2 y2坐标 *@param t 滑动时间（毫秒） * @return {Boolean} true 卡住 false 没卡住 */ dailihuadong = function (x1, y1, x2, y2, t) { var cap = agentEvent.fastScreenshot("/sdcard/a.jpg"); if (cap != nu
Easyclick快手滑动视频记录
Mr、老鬼的博客/https://laoguicom.top/doc/2/
03-18 955
快手滑动视频回弹解决办法
EasyClick 常见问题出坑
Mr、老鬼的博客/https://laoguicom.top/doc/2/
03-31 3024
EasyClick 常见问题出坑
EasyClick 免Root 仿真滑动函数封装实例
我的博客
06-26 2233
新一代简单易学，开箱即用，可编程式自动化测试软件 免ROOT不限手机环境， 支持Android 5.0到10，全节点分析不限分辨率，OpenCV图色识别 JS编程简单易学， IDEA智能开发工具支持，实时投屏预览运行 支持OpenApi， 不限调用者环境，跨语言调用。 以下代码是仿真滑动代码： 111 var result = startEnv(); logd('启动服务：'+result); function bezier_curves(cp, t) { var cx,bx,ax,
easyclick rSwipe 二指仿真滑动
Mr_老冷的博客
04-15 2089
插件用法 //单指滑动 //默认方法 rSwipe.rndSwipe(200, 700, 200, 200) //调整步进,默认0.08 rSwipe.step = 0.05 rSwipe.rndSwipe(200, 700, 200, 200) //调整调整随机时间,默认50-100 rSwipe.rndSwipe(200, 700, 200, 200, 50, 80) //调整超时时间 rSwipe.rndSwipe(200, 700, 200, 200, 50, 80, 1000) //双指滑.
vue踩过的坑
泛泛格调
03-14 377
1.路由变化页面数据不刷新问题 出现这种情况是因为依赖路由的params参数获取写在created生命周期里面，因为相同路由二次甚至多次加载的关系 没有达到监听，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是第一次进入的数据。 解决方法：watch监听路由是否变化。 watch: { // 方法1 '$route'(to...
Linux环境下Qt Creator集成OpenCASCADE的完整实践指南：避开90%开发者踩过的坑
让我们把镜头拉回到真正硬核的话题——如何在 Linux 环境下让 **Qt Creator** 和 **OpenCASCADE（OCC）** 这两个“重型武器”完美协同，打造一个稳定、高效、可维护的三维建模应用。 说实话，如果你已经在这条路上...
美图运维之旅：在阿里云上的经验以及踩过的坑
dgsfor的博客
06-17 543
前言本篇chat可能更多的是文字表述，没啥高深的用词，都是大白话，需要各位朋友有耐性的阅读下去，也希望各位朋友能够提出宝贵建议。 美图公司是如何使用阿里云的关于使用方面，我想从以下几个点简单叙述一下， 权限规划 区域规划 网络规划 型号规划 统一登录规划 命名规划权限规划权限规划只要是在账号权限规划上，一般是主账号+子账号，...
android使用技巧及踩过的坑-采坑记续集
pin-csdn的博客
03-24 2251
118、adb 连接设备出现unable to connect devices 问题 通过网络adb连接设备： adb connect [设备的ip地址] adb disconnect 或者adb disconnect [设备的ip地址] 未root的手机，不能连接，提示 unable to connect devices 解决方法： 先usb连接上，输入adb tcpip 5555 ...
JavaScript 性能优化实战：从 “卡顿列表” 到 “丝滑交互”，我踩过的坑和总结的招
最新发布
lamehsl的专栏
10-29 906
本文针对电商项目中的JavaScript性能问题，提供了一套实战优化方案。文章首先强调定位问题比盲目优化更重要，推荐使用Chrome DevTools和console.time()精准定位性能瓶颈。随后列举5个高频优化场景：1)DOM操作的批量处理减少重排；2)循环中的重复计算优化；3)事件委托减少绑定；4)内存泄漏预防；5)数据缓存避免重复计算。每个优化方案都配有具体代码示例和性能对比数据，如列表滚动帧率从25fps提升到52fps。最后提出性能优化的三个核心原则：精准定位、避免过早优化、以用户体验为准。
EasyClick易点云测 EC超级拓展插件laoleng.js
Mr_老冷的博客
08-18 4647
/** * @author Mr_老冷 QQ:1920712147 * @date 20210807 */ /** * @author Mr_老冷 QQ:1920712147 * @description laoleng类 */ let g_ret = null const laoleng = { app: {}, arr: {}, String: {}, RndStr: {}, /** *@description 键盘功能 */ .
EasyClick 使用选择器，节点
Mr、老鬼的博客/https://laoguicom.top/doc/2/
03-29 2209
EasyClick 使用选择器，节点 利用节点信息实现更多功能
EasyClick 入门科普
Mr、老鬼的博客/https://laoguicom.top/doc/2/
04-03 1万+
EasyClick 入门科普 节点 选择器
findIndex() 方法
热门推荐
Yetian_2000的博客
11-06 1万+
findIndex(fn) 方法 : （注意：1.不需要return 2.参数fn就是检索条件 ） 返回 在数组中查找符合条件第一个元素的index索引。 var arr=[12, 16, 18, 20] let index = arr.findindex((item)=>{ item >= 18 }) // 打印index为2 ...
js创建svg元素并插入到html中使用createElementNS
Yetian_2000的博客
06-09 3642
动态创建svg在插入html中
charAt()
Yetian_2000的博客
09-14 3552
charAt() 方法可返回指定位置的字符。第一个字符位置为 0, 第二个字符位置为 1
vue-i18n使用文档
Yetian_2000的博客
01-04 3159
文档地址：https://www.bookstack.cn/read/vue-i18n-8.x/spilt.2.4e9cded0cfe86bd2.md#mergeLocaleMessage(%20locale,%20message%20)
location.origin
Yetian_2000的博客
11-03 2948
window.location.origin这个获取url中包含了端口（域名或ip+端口），不需要再另外添加端口window.location.port
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值