zoukankan      html  css  js  c++  java
  • 监听页面滚动时间时所碰到的一些坑

    最近在写一个页面时,设计上要求在页面往底部滑动时,顶部固定着的头部区域隐藏,非头部区域整体往上推,页面往顶部滑动时,顶部的头部区域显示,同时处于控制范围的还有用于填补顶部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事件的监听。

  • 相关阅读:
    POJ 3186 Treats for the Cows
    HDU 1226 超级密码| NYOJ 929 密码宝盒
    POJ 1661 Help Jimmy
    POJ 1458 Common Subsequence
    POJ 1015 Jury Compromise
    window.history,页面中的返回按钮
    网站新功能引导镂空效果
    HTML5存储
    JSON对象
    点击超链接,将页面中某个数据传到另一个页面
  • 原文地址:https://www.cnblogs.com/sdwrz/p/7080788.html
Copyright © 2011-2022 走看看