CODEWITHSUNDEEP
javascripthtmlcss
Eduard Florinescu
Eduard Florinescu

Reputation: 17521

Why vertical scrollbar doesn't appear although vertical overflow is set?

I have a sidebar that sometimes is bigger than the main page, I try to set the vertical overflow but the vertical scroll bar still doesn't appear. 

/**
 * Created by eduard on 07.01.2016.
 */
console.log("Height 1 ", sidebar_height);

if ($(window).height() < sidebar_height + 35) {
    $('body').css('overflowY', 'auto');
    //$("#sidebar").css('overflowY', 'auto');
    console.log("Scrollbar should appear", $(window).height() - sidebar_height);
}
else {
    console.log("Scrollbar should not appear", $(window).height() - sidebar_height);
}

Why vertical scrollbar doesn't appear although vertical overflow is set?

Upvotes: 0

Views: 494

Answers (1)

David Wilkinson
David Wilkinson

Reputation: 5118

Setting the value to scroll should do the trick:

$('body').css('overflowY', 'scroll');

It essentially forces a scrollbar to appear regardless of overflowing content or not.

EDIT - Alternatively, try adding a class when the window height goes below:

https://jsfiddle.net/0Lhwfjk6/

I've simplified the examle slightly for this case. You'll need to resize the actual browser window.

jQuery: 

/**
 * Created by eduard on 07.01.2016.
 */
console.log("Height 1 ", sidebar_height);

if ($(window).height() < 300) {
    $('.content').addClass('scrollbar');
    //$("#sidebar").css('overflowY', 'auto');
    console.log("Scrollbar should appear", $(window).height() - sidebar_height);
}
else {
    console.log("Scrollbar should not appear", $(window).height() - sidebar_height);
}

CSS:

.scrollbar {
  overflow-y: scroll;
}

Upvotes: 1

Related Questions