是新近的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>
如果是webkit系统的浏览器,则用overflowchanged这个事件代替
对于不支持的浏览器,那只能轮询判定是否存在滚动条了,可以看这里