javascript - 如何在主体上设置滚动条以在居中的中间 div 中滚动内容？

Question

我需要一个在视口(viewport)上居中(水平)和居中(垂直)的固定高度、固定宽度的 div。将有一个导航栏，它必须“固定”到该 div 的顶部。我有内容溢出并需要滚动条。但是，我希望它不是 div 上的滚动条，而是类似于更传统的滚动条 - 在浏览器的最右侧位置。

一个接近的解决方案来自 related question , 然而their solution不保持内容 div 固定高度/宽度。

这是 what I have now .我更喜欢纯 CSS 解决方案，但我知道 Javascript 可能是必需的。

HTML

<div class="verMidOut">
    <div class="verMidMid">
        <div class="verMidIn">
            <div class="scroller">
                <div id="headerContainer" style="visibility: visible;">
                    <p>This (navigation bar) has to stay 'fixed' to the top of the red box</p>
                </div>
                <div class="mainContainer index">
                    <p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {margin: 0; padding: 0; width: 100%; height: 100%;overflow-x:hidden}
.verMidOut {width:100%; height:100%; display:table; position:relative; border: 4px solid blue; overflow: hidden;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute; border: 4px solid green; background-position: center;}
.verMidIn {width:100%; position:relative; top:-50%; border: 4px solid red;}
.mainContainer {border: 5px solid black;margin: auto;width: 512px;height: 325px;}
.scroller {width: 100%;overflow: auto;overflow-x:hidden;}
#headerContainer{visibility: hidden; margin-left:-256px;width:512px;height:80px;left:50%;position:absolute;top:15px;z-index:10;}

Answer 1

可以找到我的早期解决方案 here ，它使用 jQuery，但是，滚动条仅在内容溢出正文时出现，而不是内容 div(jsFiddle 中的黑色/红色)。

然后我added a spacer在内容 div 中，它根据窗口高度和 div 高度动态更改其高度。这会强制显示滚动条，即使那里什么也没有。

HTML

<div class="verMidOut">
    <div class="verMidMid">
        <div id="headerContainer" style="visibility: visible;">
            <p>This (navigation bar) has to stay 'fixed' to the top of the red box</p>
        </div>
        <div class="verMidIn">
            <div class="mainContainer index">
                <p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p>
                <div class="spacer"></div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {margin: 0; padding: 0; width: 100%; height: 100%;overflow-x:hidden}
.verMidOut {width:100%; height:100%; display:table; position:relative; border: 4px solid blue; overflow: hidden;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute; border: 4px solid green; background-position: center;overflow:hidden;overflow-y:auto;}
.verMidIn {width:100%; position:relative; top:-50%; border: 4px solid red;}
.mainContainer {border: 5px solid black;margin: auto;width: 512px;height: 325px;}
#headerContainer{visibility: hidden; margin-left:-256px;width:512px;height:80px;left:50%;position:absolute;top:15px;z-index:10;}
.spacer {display:inline-block;visibility:hidden;}

jQuery

//When the window is more than the height of the black box, it will calculate the 'top' for the headerContainer
function posNav() {
    if($(window).height() > $('.mainContainer').height()) {
        var diff = (($(window).height() - $('.mainContainer').height()) / 2);
        var newTop = diff + 15;
        $('.spacer').css({'height': diff});
        $('#headerContainer').css({'top': newTop});
    }
}
$(document).ready(function(){
    posNav();
    $(window).resize(function(){
        posNav();
    });
});