如何在特定条件下处理div外部高度的滚动

Question

我得到了一个div的外部高度，现在我试图在外部高度达到450时滚动该div。if部分工作平稳，但当高度低于450时，滚动仍在。如何处理这个问题我正在这里粘贴我的代码

$('.mydiv li a').click(function () {
    var popupOuter_height = $(".commondiv").outerHeight(true);
    alert(popupOuter_height);
    if ((popupOuter_height) > 450) {
        $(".commondiv").css({ "height": "380", "overflow-y": "scroll" });
    }
    else if ((popupOuter_height) < 450) {
        $(".commondiv").css({ "height": "auto", "overflow-y": "auto" });
    }
});

Answer 1

您需要定义宽度和高度才能使溢出工作。

在这里我做了一个小演示，你可以根据需要进行更改。

Html

<div id="scrolldiv" style="height: 160px;">
    <div>This is default content</div>
    <div>This is default content</div>
    <div>This is default content</div>
    <div>This is default content</div>
    <div>This is default content</div>
    <div>This is default content</div>
    <div>This is default content</div>
</div>
<button id="add_element">Add</button>
<div>
    <div>This is testing content</div>
    <div>This is testing content</div>
    <div>This is testing content</div>
    <div>This is testing content</div>
    <div>This is testing content</div>
    <div>This is testing content</div>
    <div>This is testing content</div>
</div>

JS

$(document).ready(function(){
    $('#add_element').click(function(){
        var height = $("#scrolldiv").outerHeight();
        if (height > 150) {
            $("#scrolldiv").css({"overflow-y": "scroll" });
        }
        else if (height < 150) {
            $("#scrolldiv").css({"overflow-y": "hidden" });
        }
        $('#scrolldiv').append('<div>adding content</div>');
    });    
});

http://jsfiddle.net/eodgsgwy/