浏览器的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 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React中的模式对话框 转

在16.x版本之后React提供了Protals功能来解决模式对话框不在Dom根节点导致的一些BUG。除了Protal还有更多的方法去解决这些问题,本文来自Da...

9730
来自专栏React Native开发圈

React Native 图片查看组件

npm i react-native-image-zoom-viewer--save

15120
来自专栏进击的君君的前端之路

JS相关概念

17920
来自专栏xingoo, 一个梦想做发明家的程序员

在Html中使用Requirejs进行模块化开发

在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发。 ...

266100
来自专栏kevin-blog

ubuntu18.04安装搜狗输入法

然后去搜狗输入法官网:https://pinyin.sogou.com/linux/

4.7K20
来自专栏上善若水

010HTML页面加载和解析流程详细介绍

24950
来自专栏前端人人

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

34540
来自专栏前端侠2.0

表格内,设置许多元素的大小时,js的速度慢的办法

思路1:设置td为relative,input为absolute,然后设置input大小为td的大小。

15720
来自专栏前端架构与工程

解决transition动画与display冲突的几种方法

如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translat...

22760
来自专栏BestSDK

Mockplus教程:2钟搞定APP首页原型设计,3000个免费素材库

创建项目 ? 打开Mockplus,点击新建项目,选择“手机”项目类型与合适的页面尺寸,点击“确定”即创建成功,是不是不能更简单!无需任何文件创建操作,无需输入...

34550

扫码关注云+社区

领取腾讯云代金券