内部div元素通过外滚动条滚动 [英] Inner div element scroll via outer scrollbar

问题描述

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

 < div id =outer ; 
< div id =inner> //被滚动
<！ -  content  - > 
< / div> 
< / div> 
  

示例小提琴：

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

I have a div element that scrolls vertically; the scrollbar is within the div element itself. I'd like to have the scrollbar outside of the div, similar to how a typical webpage scrollbar is. Scrollbar looks like any other webpage, but when scrolled only scrolls this particular div element.

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

Example Fiddle: http://jsfiddle.net/7pgyt/

I'd like the scrollbar to be to the far right, in the red area. The scrollbar scrolls the blue area. Can this be accomplished in just HTML and CSS?

A possible outcome would be as below:

解决方案

Given the following html structure:

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

You can use the following styles:

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

Example

Example with psuedo selectors instead of the bar divs

这篇关于内部div元素通过外滚动条滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！