专栏首页前端小作坊浏览器的overflow事件

浏览器的overflow事件

浏览器的overflow事件

Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:

See the Pen Way to detect overflow event support and use it with graceful degradation by mzhou (@zmmbreeze) on CodePen.

Webkit使用的是overflowchanged事件,而Firefox则使用overflow和underflow这两个事件。虽然Webkit只提供了一个事件,但是我们可以通过event对象的属性来知道是overflow还是underflow,甚至知道是垂直方向还是水平方向。而Firefox的两个事件则没法提供溢出方向的信息。

重要地是IE和旧版的Opera(非webkit内核)是不支持的,也没有什么特别好的fallback方法。所以在使用overflow事件时一定要做好特征检测。在Webkit下,只需判断window有没有OverflowEvent即可。而在Firefox下比较麻烦了。

查看了Modernizr的源码,发现了使用setAtrribute来检测Firefox是否支持某个事件的方法。可惜尝试之下发现不能正确检测overflow事件。于是改用创建div并激活overflow事件的方法来判断是否支持。代码如下:

var element = document.createElement('div');
if (element.addEventListener) {
  element.style.cssText = 'overflow:scroll;height:1px;width:1px;';
  document.body.appendChild(element);

  var overflowSupport = false;
  // firefox(tested on 1.5+) support overflow/underflow event
  element.addEventListener('overflow', function () {
      overflowSupport = true;
  }, false);
  element.innerHTML = '<div style="height:200px;width:1px;"></div>';

  var timeout;
  var end = function() {
      if (end.done) {
          return;
      }
      end.done = true;

      if (overflowSupport) {
          callback(function (element, type, cb) {
              element.addEventListener(type + 'flow', cb, false);
          });
      } else {
          callback();
      }

      clearTimeout(timeout);
      document.body.removeChild(element);
  };
  // Use scroll event to make sure it's right after overflow event.
  element.addEventListener('scroll', end, false);
  element.scrollTop = 1000;
  // Make sure callback was called, even browser not support scroll event.
  // For example 'opera 11.*'
  timeout = setTimeout(end, 250);
}

因为是异步的,所以一定要确保判断结果的动作是在执行过overflow事件回调之后。一个比较简单的方法是使用setTimeout延迟执行。为了保证执行顺序,时间就一定要设置长一点(250ms)。但是这样响应太慢了。幸运地是在Firefox中scroll事件是在overflow事件之后触发的,所以改为在scroll事件的回调函数中做判断。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS vs JS动画:谁更快?

    Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

    mmzhou
  • 0.1+0.2=0.30000000000000004问题的探究

    首先声明这不是bug,原因在与十进制到二进制的转换导致的精度问题!其次这几乎出现在很多的编程语言中:C/C++,Java,Javascript中,准确的说:“使...

    mmzhou
  • GA源代码里的小技巧之cookie篇

    cookie的本质是存储在浏览器端的一段简单数据(多个键值对),浏览器会从服务器接受或者发送给服务器cookie。这样便可以为没有状态的HTTP协议提供了记录状...

    mmzhou
  • Python高效编程之88条军规(1):编码规范、字节序列与字符串

    在微信公众号「极客起源」中输入595586,可学习全部的《Python高效编程之88条军规》系列文章。

    蒙娜丽宁
  • Android Monkey压力测试

    在“我的电脑”-“属性”-“高级”-“环境变量”中,单击新建,填充变量称为JAVA_HOME,变量替换JAVA安装的路径。

    小老鼠
  • 我国自主研发的首款人工智能视觉芯片面世

    “ 历史无数次的强调一个事实:谁掌握了核心技术,谁就是制造业的王者。而这个核心技术就是“芯”。 ” 在新工业革命的背景下,数据、计算力、算法和网络设施等快速迭代...

    企鹅号小编
  • Android APK脱壳--腾讯乐固、360加固一键脱壳

    启动 VirtualXposed,并在 VirtualXposed中安装 FDex2:

    用户1205080
  • 关注│我国首款人工智能视觉芯片发布能解决哪些问题?

    中关村前沿技术企业地平线机器人技术团队近期发布了首款嵌入式人工智能视觉芯片。在人工智能视觉识别领域,该类芯片每帧中可同时对200个视觉目标进行检测,为智能驾驶、...

    企鹅号小编
  • 三问我国首款嵌入式人工智能视觉芯片

    视觉识别迎来“中国大脑”:三问我国首款嵌入式人工智能视觉芯片 中关村前沿技术企业地平线机器人技术团队20日发布首款嵌入式人工智能视觉芯片。在人工智能视觉识别领域...

    企鹅号小编
  • 文件包含之通过phpinfo去Getshell

    phpinfo文件泄露一直被大家所忽视,但其实phpinfo可以为攻击渗透测试人员提供很多的信息。

    Aran

扫码关注云+社区

领取腾讯云代金券