为什么设置了垂直溢出后没有出现垂直滚动条？

【问题标题】：Why vertical scrollbar doesn't appear although vertical overflow is set?为什么设置了垂直溢出后没有出现垂直滚动条？
【发布时间】：2016-01-07 21:12:41
【问题描述】：

我的侧边栏有时比主页大，我尝试设置垂直溢出但垂直滚动条仍然没有出现。

/**
 * 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);
}

为什么设置了垂直溢出，却没有出现垂直滚动条？

【问题讨论】：

尝试将其设置为滚动而不是自动。
@Styphon 将其设置为 scroll 仍然不会使滚动条出现
你真的有固定高度吗？
我刚刚了解到我需要有一个固定的高度来设置滚动

标签： javascript html css

【解决方案1】：

将值设置为 scroll 应该可以解决问题：

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

无论内容是否溢出，它都会强制显示滚动条。

编辑 - 或者，当窗口高度低于时尝试添加一个类：

https://jsfiddle.net/0Lhwfjk6/

我已经为这个案例稍微简化了这个例子。您需要调整实际浏览器窗口的大小。

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;
}

【讨论】：