javascript - 检测垂直调整大小jquery

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

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

// 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 3

得到更好的解决方案：

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

Answer 4

作为对Doublesharp 有用答案的补充：

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

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