Question

调整浏览器大小时，我有一个简单的函数来检查窗口比率以影响布局，其中一部分是：

if ( jQ(window).width() > ($elemH*2) ) /* Target widest settings */ {
    $body.addClass('wide').removeClass('tall');
    $elemW = ($elemH*2);
    productWideSize();

以上工作完美，有0个问题（我将其包含在纯粹的上下文中）。问题似乎在于productWideSize()，如下所示：

function productWideSize(){
    $info = jQ('#productInfo');
    $infoH = jQ('#productInfo').outerHeight();
    $maxH = (jQ('#product-form').height()-120);
    if ( $infoH < $maxH ) /* Check if element height is LT available space */ {
        $info.removeClass('scroll').css({
            'margin-top' : '-' + $infoH/2 + 'px'
        })
    } else {
        $info.addClass('scroll').css({
            'margin-top' : '',
        })
    };
};

仔细调整浏览器大小时，效果非常好;但是如果进行了突然的浏览器大小更改，则if / else部分之间的转换通常不会触发。在Chrome和Firefox中测试过。

显然代码“有效”，但它不是特别健壮。我还不熟悉编码，并想知道我是否采用了一些根本不好的做法。有什么建议吗？

Answer 1

似乎问题是在条件中引用它们之前缓存值。将其更改为以下作品：

function productWideSize(){
    $info = jQ('#productInfo');
    if ( jQ('#productInfo').outerHeight() < jQ('#product-form').height()-120 ) {
        $info.removeClass('scroll').css({
            'margin-top' : '-' + jQ('#productInfo').outerHeight()/2 + 'px'
        })
    } else {
        $info.addClass('scroll').css({
            'margin-top' : '',
        })
    }
};

浏览器调整大小情况并不总是正常触发

1 个答案: