我正在使用 snipplr 的这个脚本,我该如何设置它,使容器 div 比 newWindowHeight 高度小 100px,比如 -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);
});
一个警告是,调整浏览器大小时会多次调用 resize 事件;它不仅仅是在浏览器调整大小后调用。因此,您可能会调用回调函数数百次 - 这通常是一个坏主意。
解决方案是限制或消除事件。限制意味着您不会让回调在一段时间内被触发超过 x 次(也许每秒 5 次)。去抖动意味着您在上次调整大小事件过去一定时间后触发回调(等到调整大小事件后 500 毫秒)。
jQuery 目前不支持节流或反跳选项,尽管有插件。您可能使用过的其他流行库确实具有这些功能 http://underscorejs.org/#functions,例如下划线:
$(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);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)