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

Question

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

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

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

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