是新近的firefox浏览器中支持overflow, underflow这两个事件,当某一元素的大小超出父元素的显示范围就会触发overflow事件,如果从超出显示再变回不超出的状态则触发underflow事件.

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="UTF-8">

        <title>测试用例 by 司徒正美</title>

    </head>

    <body >

        <div id="wrapper">

            <div id="child"></div>

        </div>

        <br/>

        <label><input type="checkbox" id="toggle" checked/> Overflow</label>

        <style>

            #wrapper {

                width: 300px;

                height: 300px;

                background: blue;

                overflow: hidden;

            }

            #child {

                width: 200px;

                height: 200px;

                background: yellow;

            }

        </style>

        <script>

            var wrapper = document.getElementById("wrapper"),

                    child = document.getElementById("child"),

                    toggle = document.getElementById("toggle");

            wrapper.addEventListener("overflow", function(event) {

                console.log(event);

            }, false);

            wrapper.addEventListener("underflow", function(event) {

                console.log(event);

            }, false);

            toggle.addEventListener("change", function(event) {

                if (event.target.checked) {

                    child.style.width = "400px";

                    child.style.height = "400px";

                } else {

                    child.style.width = "200px";

                    child.style.height = "200px";

                }

            }, false);

        </script>

    </body>

</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试用例 by 司徒正美</title>
</head>
<body >
<div id="wrapper">
<div id="child"></div>
</div>
<br/>
<label><input type="checkbox" id="toggle" checked/> Overflow</label>

<style>
#wrapper {
width: 300px;
height: 300px;
background: blue;
overflow: hidden;
}

#child {
width: 200px;
height: 200px;

background: yellow;
}
</style>

<script>
var wrapper = document.getElementById("wrapper"),
child = document.getElementById("child"),
toggle = document.getElementById("toggle");

wrapper.addEventListener("overflow", function(event) {
console.log(event);
}, false);

wrapper.addEventListener("underflow", function(event) {
console.log(event);
}, false);

toggle.addEventListener("change", function(event) {
if (event.target.checked) {
child.style.width = "400px";
child.style.height = "400px";
} else {
child.style.width = "200px";
child.style.height = "200px";
}

}, false);
</script>
</body>
</html>

运行代码

如果是webkit系统的浏览器,则用overflowchanged这个事件代替

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>测试用例 by 司徒正美</title>
</head>
<body >
<div id="wrapper">
<div id="child"></div>
</div>
<br/>
<label><input type="checkbox" id="toggle" checked/> Overflow</label>

<style>
#wrapper {
width: 300px;
height: 300px;
background: blue;
overflow: hidden;
}

#child {
width: 200px;
height: 200px;

background: yellow;
}
</style>

<script>
var wrapper = document.getElementById("wrapper"),
child = document.getElementById("child"),
toggle = document.getElementById("toggle");

wrapper.addEventListener("overflowchanged", function(event) {
var overflow = event.verticalOverflow || event.horizontalOverflow
var type = overflow ? "overflow" : "underflow"
delete event.type
event.type = type
console.log(event)
}, false);

toggle.addEventListener("change", function(event) {
if (event.target.checked) {
child.style.width = "400px";
child.style.height = "400px";
} else {
child.style.width = "200px";
child.style.height = "200px";
}

}, false);
</script>
</body>
</html>

运行代码

对于不支持的浏览器,那只能轮询判定是否存在滚动条了,可以看这里

overflow与underflow的更多相关文章

  1. 【转】 数据库系统——B+树索引

    原文来自于:http://blog.csdn.net/cjfeii/article/details/10858721 1. B+树索引概述 在上一篇文章中,我们讨论了关于index的几个中重要的课题: ...

  2. memwatch内存泄露检测工具

    工具介绍 官网 http://www.linkdata.se/sourcecode/memwatch/ 其功能如下官网介绍,挑选重点整理: 1. 号称功能: 内存泄露检测 (检测未释放内存, 即 动态 ...

  3. 引擎设计跟踪(九.10) Max插件更新,地形问题备忘

    最近没有大的更新. 最近本来要做max的骨骼/动画导出, 看导出插件代码的时候, 突然想起之前tagent space导出的疑问, 于是确认了一下. http://www.cnblogs.com/cr ...

  4. 转载 C#中敏捷开发规范

    转载原地址 http://www.cnblogs.com/weixing/archive/2012/03/05/2380492.html 1.命名规则和风格 Naming Conventions an ...

  5. 152. Maximum Product Subarray

    题目: Find the contiguous subarray within an array (containing at least one number) which has the larg ...

  6. 数据库系统——B+树索引

    原文来自于:http://dblab.cs.toronto.edu/courses/443/2013/05.btree-index.html 1. B+树索引概述 在上一篇文章中,我们讨论了关于ind ...

  7. 转：FIFO的定义与作用

    一.先入先出队列(First Input First Output,FIFO)这是一种传统的按序执行方法,先进入的指令先完成并引退,跟着才执行第二条指令. 1．什么是FIFO? FIFO是英文Firs ...

  8. Convert String to Long

    问题: Given a string, write a routine that converts the string to a long, without using the built in f ...

  9. C++异常处理小例

      学习程序的好方法是阅读代码和改进代码.下面的程例来自<An Overview of the C++ Programming Language>(5．1 异常和错误处理)程序用途:使用C ...

随机推荐

  1. Byte.parseByte(String s,int radix)的解释

    1. 由 基本数据型态转换成 String String 类别中已经提供了将基本数据型态转换成 String 的 static 方法 也就是 String.valueOf() 这个参数多载的方法 有下 ...

  2. C++ static 用法

    一般情况下,如果有N个同类的对象,那么每一个对象都分别有自己的成员变量,不同对象的成员变量各自有值,互不相干.但是有时我们希望有某一个或几个成员变量为所有对象共有,这样可以实现数据共享. 可以使用全局 ...

  3. asp搭建网站

    测试环境:Windows 2003 下载asp源码导入 C:\Inetpub\wwwroot ###一.通过ip访问 最后浏览 浏览器输入ip或者 http://127.0.0.1 二.通过域名访问 ...

  4. springboot: 集成jdbc

    1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  5. 2018-10-09 可用的前端 CDN

    2018-10-09 可用的前端 CDN 360 前端静态资源库 https://cdn.baomitu.com/ 新浪的前端 CDN http://lib.sinaapp.com/ 又拍云的前端库慢 ...

  6. Oracle 之 AIO (异步io)

    Linux 异步 I/O (AIO)是 Linux 内核中提供的一个增强的功能.它是Linux 2.6 版本内核的一个标准特性,AIO 背后的基本思想是允许进程发起很多 I/O 操作,而不用阻塞或等 ...

  7. mac版sublime 无法下载插件（Vue 代码无高亮问题）

    1.官方下载sublime(http://www.sublimetext.com/3) 然后需要两步(1)上传插件主包Package Control(2)更改channels的配置信息(原来是国外的需 ...

  8. CF 1093E Intersection of Permutations——CDQ分治

    题目:http://codeforces.com/contest/1093/problem/E 只能想到转化成查询一个区间里值在一个范围里的数的个数…… 没有想到这样适合用主席树套树状数组维护.不过据 ...

  9. linux CentOS 安装rz和sz命令 lrzsz

    lrzsz在linux里可代替ftp上传和下载. lrzsz 官网入口:http://freecode.com/projects/lrzsz/ lrzsz是一个unix通信套件提供的X,Y,和ZMod ...

  10. Excel if函数无法正确对比大小

    我想完成以下操作 1.提取A列数字的第7-11位的数字 2.若此数字大于1993 3.则返回20,不然返回0 于是我在B和C列上写了两个函数,分别是 MID(A1,7,4)          IF(B ...