如何使用 jquery 設置滾動高度

Question

如果高度大於 300 像素，則嘗試設置高度滾動。初始高度為 0。當 append 時，如果高度大於 300 像素，我想顯示高度滾動。怎么做？

演示： http://jsfiddle.net/cj87b41s/12/

function appendContent(){   
$("#rightDiv").append("<p> Content <span class='red'>(Remove X)</span></p>"); 
} 

$(document).on('click', 'p span', function(e) {
  $(this).parent().remove();
});

CSS：

 .rightDiv {
    width:215px;  
    vertical-align:top;
    background: #aaa;
    overflow-y: auto;  
    height:100%;
    }

Answer 1

您需要使用overflow-y: scroll和max-height: 300px

工作演示： http://jsfiddle.net/usmanmunir/1d46sa8v/

運行下面的 Snippet 以查看它的工作情況。

 function appendContent() { $(".rightDiv").append("<p> Content <span class='red'>(Remove X)</span></p>"); } $(document).on('click', 'p span', function(e) { $(this).parent().remove(); });

 .rightDiv { width: 215px; vertical-align: top; background: #aaa; overflow-y: scroll; height: 100%; max-height: 300px }.red { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="rightDiv"> </div> </br> <button onclick="appendContent()"> Append </button>