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

时间:2015-04-04 04:17:44

标签: javascript jquery

我得到了一个div的外部高度,现在我正试图在外部高度达到450时为该div提供滚动。如果部分正在平滑地工作,但当高度低于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" });
    }
});

1 个答案:

答案 0 :(得分:0)

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

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

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