CODEWITHSUNDEEP
javascriptjquerycss
Pappa S
Pappa S

Reputation: 343

How to set scroll for height using jquery

Tried to set scroll for height if height greater then 300px.Initially height is 0.when append the content if height is greater then 300 px i want to show scroll for height.How to do it?

Demo: 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%;
    }

Upvotes: 1

Views: 410

Answers (1)

Always Helping
Always Helping

Reputation: 14570

You need to use overflow-y: scroll and max-height: 300px

Working Demo: http://jsfiddle.net/usmanmunir/1d46sa8v/

Run Snippet below to see it working.

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>

Upvotes: 1

Related Questions