类似吸顶功能解决io不能实时监听onscroll的触发问题

Posted 2020-10-12 竹生云野处

问题：近期项目需要一个类似西东功能，当页面向上滚动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方法，不过据说效果也不错