是新近的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. 使用jdbc对数据库增删改查(Mysql为例)

    一.statement对象介绍 Statement对象的executeUpdate方法,用于向数据库发送增.删.改的sql语句,executeUpdate执行完后,将会返回一个整数. Statemen ...

  2. BZOJ1563 NOI2009 诗人小G【决策单调性优化DP】

    LINK 因为是图片题就懒得挂了 简要题意:有n个串,拼接两个串需要加一个空格,给你l和p,问你拼接后每个串的总长减l的绝对值的p次方的最小值 首先打表发现一下这题是决策单调的对于所有数据都成立就当他 ...

  3. web安全知识

    参考文章 :  https://www.mudoom.com/php%E5%AE%89%E5%85%A8%E7%BC%96%E7%A0%81/ SQL注入 造成sql注入的原因是因为程序没有过滤用户输 ...

  4. PHP 5.5.38 + mysql 5.0.11 + zabbix3.0 + nginx 安装

    PHP 5.5.38 + mysql 5.0.11 + zabbix3.0 + nginx 1.首先在安装好环境下安装 zabbix3.0情况下 2. yum install mysql-devel ...

  5. [LeetCode系列]爬梯问题的递归解法转换为迭代解法

    有一个n阶的梯子, 你每次只能爬1阶或2阶, 请问共有多少种登顶的爬法?(正好爬完n阶, 不能多也不能少) 本题最优解是直接套用菲波那切数列即可(因为菲波那切数列的第n个元素正好等于第n-1个元素和第 ...

  6. easyui datagrid 基础方法和事件

    数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节 ...

  7. 解决Oracle的http://localhost:1158/em页面打不开的问题

    https://localhost:1158/em 无法显示页面,在网上查阅资料以后发现这个页面时由服务:OracleDBConsoleoracl控制的,所以到管理界面打开服务:OracleDBCon ...

  8. Hibernate学习10——Hibernate 查询方式

    本章主要是以查询Student的例子: Student.java: package com.cy.model; public class Student { private int id; priva ...

  9. Account银行账户

    package com.hanqi; //账户类 public class Account { String ZhangHao; double CunKuanYuE; Account(String Z ...

  10. CentOS 7 安装 Nodejs npm 及版本冲突解决

    JC&BC 笔记: 可能没安装过 npm 的人会有点疑惑,安装 npm 跟安装 nodejs 有什么关系? 安装 npm 其实就是安装 nodejs 的过程.这一点官方说的很明白,npm 依赖 ...