是新近的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這個事件代替
對於不支持的瀏覽器,那只能輪詢判定是否存在滾動條了,可以看這里