Question

我正在创建一个登录页面，其中我使用一个小的javascript和jquery来垂直对齐登录框。

我还有一个关于resize（）的事件，将盒子放在中间位置。

但是，使用resize（），每次用户调整窗口大小时，函数都会被触发，这是一种丑陋的行为：））

所以，我想知道是否有办法仅在垂直调整大小时触发该函数。

谢谢

Answer 1

每次都会触发，但您可以跟踪宽度以仅检查垂直调整大小：

// track width, set to window width
var width = $(window).width(); 
// fire on window resize
$(window).resize(function() {
    // do nothing if the width is the same
    if ($(window).width()==width) return; 
    // update new width value
    width = $(window).width();
    // ... your code
});

Answer 2

得到更好的解决方案：

$('#element').resizable({
    stop: function( event, ui ) {
        $('#element').height(ui.originalSize.height);
    }
});

Answer 3

您可以为水平和垂直调整大小创建可重复使用的事件，而不是针对要检测垂直调整大小的每种情况比较高度，如下所示：

// Horizontal and vertical window resize events.
(function () {
    var win = jQuery(window),
        prev_width = win.width(),
        prev_height = win.height();
    win.on('resize', function () {
        var width = win.width(),
            height = win.height();

        if (width !== prev_width) {
            win.trigger('hresize');
        }
        if (height !== prev_height) {
            win.trigger('vresize');
        }

        prev_width = width;
        prev_height = height;
    });
})();

这样，您只需将该代码放置一次，然后使用如下事件：

$(window).on('hresize', function () {
    // handle horizontal resizing
});

$(window).on('vresize', function () {
    // handle vertical resizing
});

Answer 4

作为Doublesharp's useful answer的补充：

就我而言，window.outerWidth效果更好，垂直调整大小也很稳定。

确实，$(window).width()遇到了一些问题：当我只是垂直调整大小时，它（奇怪地！）也恰好被修改了。

检测垂直调整大小jquery

4 个答案: