javascript - 另一个 div 内的固定 div

Question

我已经为这个问题苦苦挣扎了两个多小时，有没有办法在一个更大的 div 中修复一个 div。当我滚动时，我想让右侧部分不滚动。

所以我的问题是，有没有办法在没有 jquery 的情况下做到这一点？

谢谢

Answer 1

您必须定位内部 div absolute：

.outerDiv {
    position: relative;
    /* give it some height */
}
.contentDiv {
    height: 100%;
    overflow: auto;
}
.innerDiv {
    position: absolute;
    right: 0;
    left: 50%;
    top: 0; bottom: 0;
}

这是小提琴：http: //jsfiddle.net/wSxss/

---

根据您的需要调整定位值。

Answer 2

这个小提琴演示了以下解决方案：

HTML

<div class="wrapper">
    <div class="scroller></div>
    <div class="fixed"></div>
</div>

CSS（关键部分示例）

.wrapper {
    position: relative;
    height: 40px;
    overflow: hidden;
}

.scroller {
    padding-right: 200px;
    height: 100%;
    overflow: auto;
}

.fixed {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    width: 160px; /* .scroller padding minus the right offset to accomodate scroll bar and minus any real separation between it and the scroller */
}