如何在特定條件下處理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/