类似吸顶功能解决ios不能实时监听onscroll的触发问题
问题：近期项目需要一个类似西东功能，当页面向上滚动160px后div固定在顶部
解决方法：首先，想到的是window.onscroll方法
.fixed{position:fixed;-webkit-transform: translateZ(0);width:100%;top:0;z-index:99999;}
window.onscroll = function () {
var divTop= document.getElementById('divTop');
var scrollHeight= document.documentElement.scrollTop || document.body.scrollTop;
if(scrollHeight>160){//当滚动高度超过160赋予div fixed属性，将其固定在顶部
divTop.className = 'divTop fixed'
}else{
divTop.className='divTop'
}
}
结果：该方法在安卓上效果很好，可是在ios上出现了不能实时监听scroll滚动的问题
原因：iOS 的 webview 内核设定了其在进弹性滚动时，会停止所有的事件响应及 DOM 操作引起的页面渲染。
解决方法：
1、touchmove
window.ontouchmove = function(e){
var e = event || window.event;
var divTop= document.getElementById('divTop');
var scrollHeight= document.documentElement.scrollTop || document.body.scrollTop;
if(scrollHeight>160){//当滚动高度超过160赋予div fixed属性，将其固定在顶部
divTop.className = 'divTop fixed'
}else{
divTop.className='divTop'
}
}
touchmove会有一个问题，当手滑动较快时，手指离开屏幕还会有一个惯性滑动，而这惯性滑动touchmove是监听不到的
所以只有在加入一个window.onscroll来监听惯性滑动结束时的scroll，
window.ontouchmove = function(e){}
window.onscroll = function () {}
2、position:sticky粘性定位元素
需注意的是：
a、粘性定位是相对定位和固定定位的混合，在目标区域是行为变现为relative属性，当滚动超出目标区域时表现为fixed属性
b、需指定top,bottom，left,right其中的至少一个阀值，top优先级高于bottom，left高于right
c、设定sticky元素的父节点overflow:visible属性，也就是说元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
d、该元素不脱离文本流
使用该属性我们只需给div设定一个class
.sticky{position: -webkit-sticky;position: sticky;top: 0;width:100%;z-index:99999;}
.divTop{width:100%;height:200px;line-height:200px;text-align:center;}
<div class='divTop sticky' id='divTop'>吸顶</div>
以上为sticky的解决方法，该方法只需增加sticky属性，方法简便，推荐使用
3、引用iscroll插件，因为我的是单页面的一个功能，没有大量使用这个功能，所以没有用iscroll方法，不过据说效果也不错
类似吸顶功能解决ios不能实时监听onscroll的触发问题的更多相关文章
- iOS UITextField实时监听获取输入内容，中文状态去除预输入拼音
http://blog.csdn.net/cse110/article/details/51360796 - (void)textFieldDidChange:(UITextField *)textF ...
- ECSTORE导航吸顶功能
ecstore导航吸顶功能,在导航父元素中加入id,如: <div id="mainNav1"></div> 在footer.html中添加以下js代码: ...
- javascript --- 实时监听输入框值的变化
实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...
- input实时监听(input oninput propertychange onpropertychange)
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- Android实时监听网络状态
Android实时监听网络状态(1) 其实手机在网络方面的的监听也比较重要,有时候我们必须实时监控这个程序的实时网络状态,android在网络断开与连接的时候都会发出广播,我们通过接收系统的广播就 ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- js与jquery实时监听输入框值的oninput与onpropertychange方法
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
- Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！
最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...
随机推荐
- 让边框和文本一样高，不受line-height影响，可以使用padding，padding可以用于行内元素
如果设置了,display:inline-block;边框大小至少和行高一样.这样就可能比文字高.
- JSP标记
JSP标记是JSP页面中很重要的组成部分,JSP标记包括指令标记.动作标记和自定义标记.其中自定义标记主要讲述与Tag文件有关的Tag标记. 一 指令标记page Page指令标记,简称page指令, ...
- Export BOM - BOMPXINQ.EXPLODER_USEREXIT API
--======================================================================== -- Procedure : explode ...
- DOM节点类型
DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JavaScript中是作为Node类型实现的:除了IE外,在其他所有浏览器中都可以访问到这个类型.JavaS ...
- [测试题]幸运序列（lucky）
Description Ly喜欢幸运数字,众所周知,幸运数字就是数字位上只有4和7的数字. 但是本题的幸运序列和幸运数字完全没关系,就是一个非常非常普通的序列.哈哈,是不是感觉被耍了,没错,你就是被耍 ...
- for in 和 for of 的区别
1.for...in 循环:只能获得对象的键名,不能获得键值 for...of 循环:允许遍历获得键值 var arr = ['red', 'green', 'blue'] for(let item ...
- 关于RecyclerView嵌套导致item复用异常，界面异常的问题
常规需求: 外层RecyclerView嵌套内层RecyclerView , 在上下滑动的时候会出现item数据以及view的显示异常. 解决办法: 1.重写 getItemViewType 方法 ...
- fidderl 录制导出 jmeter格式文件
总共需要五步 1.下载扩展脚本 2.将下载后的文件剪切到 fiddler 安装目录下 3.重新启动fillder 4.设置筛选条件 5.录制完成后导出文件 1.下载扩展脚本 首先需要下载支持jmete ...
- Kinect外包-就找北京动点飞扬软件（长年承接微软Kinect体感项目外包，有大型Kinect案例）
承接Kinect体感企业项目.游戏项目外包 有丰富案例提供演示,可公对公签正规合同,开发票. 我们是北京的公司.专业团队,成员为专业WPF产品公司一线开发人员,有大型产品开发经验: 提供优质的售后服务 ...
- 浅析HashMap的实现原理
本文参照https://www.cnblogs.com/chengxiao/p/6059914.html#commentform作者的文章,并分享一些自己的体会. 本文将主要回答以下两个问题: 1. ...