内部div元素通过外部滚动条滚动

Question

我有一个垂直滚动的div元素; 滚动条位于div元素本身内.我想在div之外设置滚动条,类似于典型的网页滚动条.滚动条看起来像任何其他网页,但滚动时只滚动此特定div元素.

<div id="outer">
    <div id="inner"> //to be scrolled
        <!-- content -->
    </div>
</div>

示例小提琴:http://jsfiddle.net/7pgyt/

我希望滚动条位于最右边的红色区域.滚动条滚动蓝色区域.这可以用HTML和CSS完成吗？

可能的结果如下:

Answer 1

鉴于以下html结构:

<div id="wrapper">
    <div id="top" class="bar"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <div id="bottom" class="bar"></div>
</div>

您可以使用以下样式:

#wrapper {
    position:relative;
    height:200px;
}

#outer {
    background-color: red;
    overflow-y:auto;
    height: 200px;
}

#inner {
    color: white;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    margin:50px;
    position:relative; z-index:1;
}

.bar {
    height:50px; 
    z-index:2;
    position:absolute; 
    background:red; 
    left:0; 
    right:20px;
}

#bottom {bottom:0;}
#top {top:0; }

例

使用psuedo选择器而不是bar div的示例