html - div滚动条超出可见区域

Question

我有一个可横向滚动的 div， 在这个里面，我有一个固定大小的 div 来包含标题数据，还有一个 div 调整到页面大小，其中包含与标题匹配的内容。

外部 div 是可横向滚动的，因此标题会与包含的数据一起滚动。 数据可沿 y 方向滚动，以允许长数据列表。

但问题是，除非页面完全滚动到右侧，否则数据的滚动条不可见。

html:

<div id="outerContainer">
<div id="xScroll">
    <div id="Header">fixed height header

    </div>
    <div id="yScroll">this container ajusts to page size
        <div id="whitespace">high content is y-scrollable</div>
        <br/>
    </div>
</div>

CSS:

#yScroll {
background:green;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width:1200px;
top: 90px;
bottom: 150px;
}
#whitespace{
    background:white;
    height:500px;
}

#Header {
    background:red;
    height:90px;
    width:1200px;
}

#xScroll {
    position:relative;
    height: 500px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
#outerContainer {
    background:gray;
}
#long {
    width:1200px;
}

我已在以下位置演示了该问题: http://jsfiddle.net/f7sc4/

Answer 1

在div外部显示滚动条的简单方法是这样的:

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scoll;
}

对我有用。 我的潜水姿势是绝对的。