是新近的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. Servlet实现验证码图片（一）

    Servlet实现数字字母验证码图片(一): 生成验证码图片主要用到了一个BufferedImage类,如下:

  2. 一些Fibonacci数列的神奇性质【数学】

    递推式: \(f_i=1 (1\leq i\leq 2)\) \(f_i=f_{i-1}+f_{i-2}(i>2)\) 一些性质 \(\sum_{i=1}^n f_i=f_{n+2}-1\) \ ...

  3. BZOJ3675 Apio2014 序列分割 【斜率优化】

    Description 小H最近迷上了一个分隔序列的游戏.在这个游戏里,小H需要将一个长度为n的非负整数序列分割成k+1个非空的子序列.为了得到k+1个子序列,小H需要重复k次以下的步骤: 1.小H首 ...

  4. .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写？

    本文将解释在 .NET 技术栈中各种不同使用方式下 N E T 三个字母何时大写何时小写:前面的 “.” 什么时候加上,什么时候去掉,什么时候又使用 “dot”.   .NET 在技术文档中 如果你阅 ...

  5. Python3.x time模块

    python中,我们会用到很多和时间相关的操作.下面就来看看时间的模块的作用. 使用相应功能需要导入time模块 import time time模块方法: asctime(p_tuple=None) ...

  6. bat总结1

    获取当前目录 @echo offecho 当前盘符:%~d0echo 当前盘符和路径:%~dp0echo 当前盘符和路径的短文件名格式:%~sdp0echo 当前批处理全路径:%~f0echo 当前C ...

  7. 相对导入中Attempted relative import in non-package问题

    这一篇应该是解释的比较清楚: http://stackoverflow.com/questions/14664313/attempted-relative-import-in-non-package- ...

  8. WPF 自定义消息框（转）

    相信很多人用过MessageBox.show(),是不是觉得这个消息框有点丑呢,反正我是觉得有点丑的,所以我自己重写了一个.先不说,上两幅图对比先: 当然,也不是很好看,不过比原有的好多了. 不多说了 ...

  9. sentry docker-compsoe 安装以及简单使用

    1. 准备环境 docker docker-compose     2. 安装 a. docker-compose git clone git clone https://github.com/get ...

  10. uGUI知识点剖析之AutoLayout

    http://www.2fz1.com/post/unity-ugui-autolayout/ uGUI知识点剖析之AutoLayout 前文详细介绍过RectTransform,RectTransf ...