是新近的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. java运行jar命令提示没有主清单属性和找不到主类

    推荐一个java运行jar命令提示没有主清单属性的百度经验的链接:https://jingyan.baidu.com/article/db55b60990f6084ba30a2fb8.html jav ...

  2. ASP.NET Core 中的SEO优化（2）：中间件中渲染Razor视图

    前言 上一篇文章<ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存>中介绍了中间件的使用方法.以及使用中间件实现服务端静态化缓存的功能.本系列文章的这些技巧都是我 ...

  3. Django之验证码的生成和使用

    1.基于PIL生成一个带验证码的图片和验证码,生成验证码图片需要Monaco.ttf字体,可按自己要求更改check_code中的字体和字体文件位置,如下图 #!/usr/bin/env python ...

  4. LG1343 地震逃生

    题意 汶川地震发生时,四川**中学正在上课,一看地震发生,老师们立刻带领x名学生逃跑,整个学校可以抽象地看成一个有向图,图中有n个点,m条边.1号点为教室,n号点为安全地带,每条边都只能容纳一定量的学 ...

  5. drone 学习五 集成gitlab 配置以及简单测试

    备注: 使用docker-compose  进行安装 同时集成gitlab,预备环境 docker  docker-compose  gitlab 1. docker-compose version: ...

  6. 转 neighbour table overflow 问题解决

    接到保障,说某来机器服务没法访问,于是,准备连接到机器上去看个究竟. 尼玛居然连不上,连ping都ping不通,无奈只能求助机房. 机房人员检查, 发现报 neighbour table overfl ...

  7. 我的 SONY MP3 NWZ-B105F

    我的 SONY MP3 NWZ-B105F 只有 2GB 的容量,好像2007年出来的,现在还可以开机和播放. 使用的 SigmaTel 的方案 BGA 的封装,1.1inch 屏幕竟然是彩屏,锂电池 ...

  8. 每30秒运行一下shell脚本

    cd /usr/local/sbin/     //存放shell脚本 目录. vim guoguosql.sh      //每30秒运行一个php文件.   文件路径为 vim /home/www ...

  9. easyui datagrid 基础方法和事件

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

  10. 使用Maven运行Solr（翻译）

    Solr是一个使用开源的搜索服务器,它采用Lucene Core的索引和搜索功能构建,它可以用于几乎所有的编程语言实现可扩展的搜索引擎. Solr的虽然有很多优点,建立开发环境是不是其中之一.此博客条 ...