监听页面滚动时间时所碰到的一些坑

最近在写一个页面时，设计上要求在页面往底部滑动时，顶部固定着的头部区域隐藏，非头部区域整体往上推，页面往顶部滑动时，顶部的头部区域显示，同时处于控制范围的还有用于填补顶部fixed定位所占据的元素。

引起页面滚动的因素有以下几种：

1、页面中部分元素显示或隐藏，导致document的scrollTop属性变化

2、body元素或html元素在被设置overflow:hidden之后，document的scrollTop属性值变为0

对于第1种：这次的解决方案有一些特殊：考虑到只是顶部的元素的样式出现显示与隐藏，而顶部之外的元素的宽高并未发生变化，此时代表文档未发生滚动（顶部元素显示和隐藏所带来的新增或失去的距离刚好被归入到scrollTop范围内）

对于第2种：body元素或html元素被设置成overflow:hidden通常是在弹框打开时，此时通过全局变量或者向全局对象注入布尔值:modalIsOpen，弹框打开时该变量设置为true，弹框关闭之后该变量设置为false，之后判断该变量，若modalIsOpen为true，则取消document对象的scroll事件的监听。

 

转载于:https://www.cnblogs.com/sdwrz/p/7080788.html