how to handle scroll in outer height of a div for specific condition

Question

I got the outer height of a div, now I am trying to give scroll for that div when the outer height reached on 450. The if part is working smoothely but when the height is below 450 the scroll is still there. How to handle this problem I am pasting my code here

$('.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

You need to define width and height in order for overflow to work.

Here I made small demo, you can change it according to your need.

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/