Question

我需要以编程方式将div的scollbar相对于其父容器定位。

.outerContainer {
  width: 400px;
  height: 100px;
  overflow: auto;
}
.innerContainer {
  width: 100px;
  overflow: auto;
}
div {
  width: 200px;
}

<div class="outerContainer">
  <div class="innerContainer">
    <div>abcdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
    <div>abcd</div>
  </div>
</div>

目前要查看innerContainer的水平滚动条，我需要向下滚动到outerContainer中的最后一行。

但是，我需要修复innerContainer的水平滚动条位置，以便我不必向下滚动outerContainer到最后一行以便查看它（最好是找到它）在顶部）。

无论outerContainer的滚动位置如何，我的innerContainer水平滚动条都应始终可见。

这是jsfiddle：https://jsfiddle.net/khh5k197/

Answer 1

您实际上不需要以编程方式执行此操作，只需将overflow放在正确的位置即可。这是long-line附近的x滚动：

.outerContainer{
  width: 400px;
  height: 100px;
  overflow: auto;
}
.innerContainer{width: 100px}
div {width: 200px}
.long-line {overflow: auto}

<div class="outerContainer">
  <div class="innerContainer">
    <div class="long-line"> abcdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
    <div> abcd </div>
  </div>
</div>

希望它有所帮助！

修改

重新阅读您的问题，我注意到您希望此innerContainer滚动条始终可见，即使您向下滚动outerContainer。

不幸的是，这不是一个选项，因为滚动条属于某个元素，并且总是位于底部和右侧（除非您使用direction: rtl）位置，当您滚动outerContainer时，{ {1}}对此事没有选择（简单地说就是:)。

但是，您可以使用this one这样的插件完全重新创建滚动条，让您在自己可以做的事情以及放置它们的位置拥有更多的自由......您可能需要调整它。

以编程方式相对于其父容器

1 个答案:

修改