jQuery: обнаружение браузера изменяет размер
Я использую этот сценарий от snipplr, Как я установил бы его так, контейнерное отделение - на 100 пкс меньше, чем newWindowHeight высота, как-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>
1 ответ
] Сценарий, который вы нашли слишком сложным. Следующее сработало для меня:[
] [$(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 в настоящее время не поддерживает опцию дросселирования или дребезга, хотя есть плагины. []Другие популярные библиотеки, которые вы, возможно, использовали, имеют эти возможности[], например, подчеркивание:[
] [$(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);
});