onscroll在移动端的使用

1.实际需求

（移动端项目）当往下滑动到一定距离时，显示导航栏，导航栏定位在顶部，当向上滑动并小于那个距离时，导航栏隐藏。

2.解决方案

实时监测浏览器滚动高度，绑定onscroll事件，具体详情见此文--https://github.com/merrier/mobile-scroll-events，此文介绍的很详细，包括在Android 和 ios上的兼容性问题，以及处理方案。下面说点此文没有的。

3.期间所遇问题

scrollY & pageYOffset
当时因未知原因，使用scrollTop在ios上测试失败，后在上文链接中的参考文章onscroll Event Issues on Mobile Browsers中，发现里面的实例使用的window.scrollY，可以实时反映滚动条滚动高度，即便是惯性滚动也能成功反映出。pageYOffset是scrollY的别名，区别在于pageYOffset的兼容性比较好。
关于pageYOffset出现的bug问题
官方给出的定义为只读,然而实际情况却是如下：（实例为仿百度做的）

（1）绑定onscroll事件

（2）导航切换，页面滚动到222px的地方，不显示上方的搜索框内容

（3）页面初始进去，没什么问题，效果正常。但是当切换了导航后，问题就来了，滚动到顶部，导航却出现了，

（4）观察到打印出的window.pageYOffset，在切换了导航后一直为 222， what？？？？？？

这个怎么看怎么像是被赋值了，说好的只读呢？（暂未理解。。。）

（5）最后的解决办法，就是把window.pageYOffset去掉了，不用效果也是正常的（当时阴差阳错才用到这个）

转载于:https://www.cnblogs.com/shenmissing/p/9072921.html

onscroll在移动端的使用相关推荐

javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
移动端的touch事件处理
简要的探讨一下移动端 touch 事件处理几个坑,以及相应的简单处理方法. click 穿透假设有个弹出层,上面有个关闭的按钮支持 touchend 触发后关闭,若正好下方有个元素支持 click ...
vite+ts+vue组合式api-c端-移动端项目（保姆级教学）
文章目录一.项目创建准备工作 1.配置vite和ts默认项 2.配置路由命名 3.配置环境源env 4.二次封装axios 5.配置反向代理 6.测试请求接口 7.配置rem,配置移动端 8.配置v ...
移动端+京东移动端首页制作
一:移动端的viewport 手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题 ...
移动端、PC端网页特效
移动端网页特效标题触屏事件移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...
IOS端 vux中scroll滚动自动回弹到顶部或者左侧的解决办法
IOS端 vux中scroll滚动自动回弹到顶部或者左侧的解决办法问题表象在滑动的时候,偶发性出现自动回弹到顶部的现象,通过onScroll回调发现scrollTop为-1造成回弹,开始寻找为什么 ...
android avm灰色,APICloud AVM多端开发案例深度解析(上)--点餐app开发
AVM多端开发是APICloud定义的一套新的代码编写标准(DSL):基于标准Web Components组件化思想,兼容Vue / React语法特性,通过一次编码,分别编译为Android和iOS ...
APICloud AVM多端开发 | 《外卖app开发》项目源码深度解析（上）
为了让开发者更加快速的学习和了解APICloud多端开发技术,APICloud平台特别推出一款多端源码-<餐饮点餐>,可以体验一套代码编译Android和iOS app+小程序. AVM多 ...
android 电商app组件化,APICloud AVM多端开发案例深度解析(一)--生鲜电商app开发
AVM多端开发是APICloud定义的一套新的代码编写标准(DSL):基于标准Web Components组件化思想,兼容Vue / React语法特性,通过一次编码,分别编译为Android和iOS ...

onscroll在移动端的使用

1.实际需求

2.解决方案

3.期间所遇问题

onscroll在移动端的使用相关推荐

最新文章

热门文章