Question

$("body").bind("resize", function(){
  alert("document height changed");
});

是否可以将resize绑定到body元素？每当页面高度更改时，我都想使用一些脚本来调整左侧滑块的高度，所以我尝试使用此脚本，因为页面内容区域的高度将基于动态内容而更改，而页面刷新不会。页面加载默认代码正在运行。但是当我使用具有不同高度的选项卡菜单项时，滑块高度不会随着新高度而变化。

Answer 1

这是您可以手动检测到的方式：

function onElementHeightChange(elm, callback){
	var lastHeight = elm.clientHeight, newHeight;
	(function run(){
		newHeight = elm.clientHeight;
		if( lastHeight != newHeight )
			callback();
		lastHeight = newHeight;

        if( elm.onElementHeightChangeTimer )
          clearTimeout(elm.onElementHeightChangeTimer);

		elm.onElementHeightChangeTimer = setTimeout(run, 200);
	})();
}


onElementHeightChange(document.body, function(){
  alert('Body height changed');
});


$('button').on('click', function(){
    document.body.style.height = Math.floor((Math.random()*5000)+1) + 'px';
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset=utf-8 />
<title>detect document height changes</title>
</head>
<body>
  <button>change document height</button>
</body>
</html>

是否可以将调整大小绑定到body元素？

1 个答案: