是新近的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. asp搭建网站

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

  2. WebBrower使用 Http 代理访问网页

    public struct Struct_INTERNET_PROXY_INFO { public int dwAccessType; public IntPtr proxy; public IntP ...

  3. python模块--随机模块

    import random print(random.random()) # 随机产生一个(0,1)的 float 0.026244299361600776 print(random.randint( ...

  4. 如何使用 nslookup 查域名的 ttl

    如何使用 nslookup 查域名的 ttl nslookup 经常用,但是最近才使用到查 ttl 的信息. 域名的 ttl 也是网站优化的一个重要参数. nslookup -d www.fastad ...

  5. python+anaconda+pycharm工具包安装

    更新额外包 $ conda update conda 更新pip python -m pip install --upgrade pip 更新所有 conda update --all 安装ffmpe ...

  6. VMware下安装的Mac OS X如何修改显示分辨率 (转)

    我在Win7下利用VMware安装了苹果的OS x 10.8系统,安装成功启动后,发现分辨率为1024*768,而宿机的分辨率是1440*900,我想让虚拟机全屏显示,也就是想在雪豹下屏幕的分辨率也能 ...

  7. golang之交叉编译设置

    俺的环境,os x,目的,生成64位linux的elf文件 直接下载osx的包就可以,不需要特意去下载源码包,我的go目录是~/golang/go cd ~/golang/go/srcGOOS=lin ...

  8. 杂项-数学软件：Mathematica

    ylbtech-杂项-数学软件:Mathematica Mathematica是一款科学计算软件,很好地结合了数值和符号计算引擎.图形系统.编程语言.文本系统.和与其他应用程序的高级连接.很多功能在相 ...

  9. Docker Toolbox常见错误解决方案

    错误1 Error checking TLS connection: Error checking and/or regenerating the certs: There was an error ...

  10. 科普Spark，Spark是什么，如何使用Spark

    科普Spark,Spark是什么,如何使用Spark 1.Spark基于什么算法的分布式计算(很简单) 2.Spark与MapReduce不同在什么地方 3.Spark为什么比Hadoop灵活 4.S ...