我从snipplr使用这个脚本,我如何设置它,所以容器div比newWindowHeight高度小100像,比如-100或某些东西.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
//If the User resizes the window,adjust the #container height
$(window).bind("resize",resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("max-height",newWindowHeight );
}
});
</script>
解决方法
你发现的脚本过于复杂的问题.以下为我工作：
$(function(){
// Cache reference to our container
var $container = $("#container");
// A function for updating max-height
function updateMaxHeight () {
$container.css("max-height",$(this).height() - 100);
}
// Call updateMaxHeight when browser resize event fires
$(window).on("resize",updateMaxHeight);
});
一个警告是调整大小事件在调整浏览器大小时被调用很多;浏览器调整大小后不要调用.因此,您可以将回调函数调用数百次 – 这通常是一个坏主意.
解决方案是节流或反弹事件.调节意味着你不会让回调在一段时间内被触发超过x次(也许是每秒5次).去抖动意味着在从上一次调整大小事件经过一段时间后触发回调(等待直到大小事件后的500毫秒).
jQuery目前不支持油门或去抖动选项,尽管有插件. Other popular libraries you may have used do have these features,如下划线：
$(function(){
// Cache reference to our container
var $container = $("#container");
// A function for updating max-height
function updateMaxHeight () {
$container.css("max-height",$(this).height() - 100);
}
// Version of updateMaxHeight that will run no more than once every 200ms
var updateMaxHeightThrottled = _.throttle(updateMaxHeight,200);
// Call updateMaxHeightThrottled when browser resize event fires
$(window).on("resize",updateMaxHeightThrottled);
});
