overflow与underflow
是新近的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的更多相关文章
- 【转】 数据库系统——B+树索引
原文来自于:http://blog.csdn.net/cjfeii/article/details/10858721 1. B+树索引概述 在上一篇文章中,我们讨论了关于index的几个中重要的课题: ...
- memwatch内存泄露检测工具
工具介绍 官网 http://www.linkdata.se/sourcecode/memwatch/ 其功能如下官网介绍,挑选重点整理: 1. 号称功能: 内存泄露检测 (检测未释放内存, 即 动态 ...
- 引擎设计跟踪(九.10) Max插件更新,地形问题备忘
最近没有大的更新. 最近本来要做max的骨骼/动画导出, 看导出插件代码的时候, 突然想起之前tagent space导出的疑问, 于是确认了一下. http://www.cnblogs.com/cr ...
- 转载 C#中敏捷开发规范
转载原地址 http://www.cnblogs.com/weixing/archive/2012/03/05/2380492.html 1.命名规则和风格 Naming Conventions an ...
- 152. Maximum Product Subarray
题目: Find the contiguous subarray within an array (containing at least one number) which has the larg ...
- 数据库系统——B+树索引
原文来自于:http://dblab.cs.toronto.edu/courses/443/2013/05.btree-index.html 1. B+树索引概述 在上一篇文章中,我们讨论了关于ind ...
- 转:FIFO的定义与作用
一.先入先出队列(First Input First Output,FIFO)这是一种传统的按序执行方法,先进入的指令先完成并引退,跟着才执行第二条指令. 1.什么是FIFO? FIFO是英文Firs ...
- Convert String to Long
问题: Given a string, write a routine that converts the string to a long, without using the built in f ...
- C++异常处理小例
学习程序的好方法是阅读代码和改进代码.下面的程例来自<An Overview of the C++ Programming Language>(5.1 异常和错误处理)程序用途:使用C ...
随机推荐
- [CF895E]Eyes Closed
luogu description 一个序列\(a_i\),支持一下两种操作. \(1\ \ l_1\ \ r_1\ \ l_2\ \ r_2\): 随机交换区间\([l_1,r_1]\)和\([l_ ...
- python第三方库
autopy autopy是一个自动化操作的python库,可以模拟一些鼠标.键盘事件,还能对屏幕进行访问 pywin32 win32api的python封装 PIL python的图形图像处理框架
- POJ1220 Number Base Conversion
题意 Write a program to convert numbers in one base to numbers in a second base. There are 62 differen ...
- 使用npm install报错- operation not permitted解决
原文:https://blog.csdn.net/weixin_41715295/article/details/79508104 这几天使用npm install时一直报错-4048 operati ...
- MySQL主从报错解决:Failed to initialize the master info structure
大清早收到一个MySQL的自定义语言告警 :replication interrupt,看来是主从同步报错了. 登陆MySQL,执行 show slave status \G 发现salve已经停止了 ...
- requirejs 到底有什么好处?
无论是在backbone时代,还是angularjs 时代 我都用过requirejs, 后来慢慢全都去掉了, 因为在前端开发requirejs 感觉没有带来任何实质性的好处. 从几个方面说说我的感受 ...
- C# 文字转成声音
C#程序要把特定的文字朗读出来,对于Windows 7及之后的系统可以使用.Net组件——System.Speech 首先在项目中添加“System.Speech”的引用: 然后大致的示例代码如下: ...
- cowboy的中间件
想不到cowboy这样的,居然也有中间件的概念,膜拜作者 创建工程 rebar-creator create-app testCowboy testCowboy_app.erl -module(tes ...
- linux命令ls -l的total是怎么计算出来的?
自己手写实现ls -l命令纠结了很久的地方,刚才总算搞明白了.直接上代码重要部分 long nTotalBlocks = 0; DIR* dp = opendir(dirPathName); stru ...
- 一个简单的Java Web项目搭建流程
今天试图在服务器上搭建一个web服务器,顺便回顾了java web项目的入门,使用Servlet处理HTTP请求,并记录日志等操作.当很久没有做过web项目时,有些东西还是很容易忘记的. Maven配 ...