javascript - 如何固定元素的位置但相对于容器

Question

我有一个容器，左右各有 2 个按钮，中间有文本。我希望文本滚动，同时 2 个按钮固定在容器底部，如下图所示。

但我希望卷轴位于外容器上。附上下面的html和css代码。

此外，当线条小于容器的高度时，按钮仍应贴在容器的底部。

请帮忙。

PS: markup 和 css 都可以更改。

.container {
  width: 400px;
  height:200px;
  border: 1px solid;
  position:relative;
  overflow:auto;
  margin-bottom:4rem;
}

.line {
  height:8px;
  width:100%;
  background-color: grey;
  border-radius: 8px;
  margin-bottom:20px;
}

.text{
  padding: 5px 50px;
}

.button-wrapper{
    position: absolute;
    bottom: 4px;
}

.button{
  width:32px;
  height:32px;
  background-color:orange;
}

.left {
  left:4px;
}

.right{
  right:4px;
}

<div class="container">
   <div class="button-wrapper left">
    <div class="button "></div>
   </div>
   <div class="text">
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
   </div>
   <div class="button-wrapper right">
    <div class="button "></div>
   </div>
 </div>

Answer 1

如果您被允许更改您的标记，这里有一个解决方案:

将两个按钮放在一个包装器中:

   <div class="button-wrapper">
    <div class="button left"></div>   
    <div class="button right"></div>
   </div>

将 position: sticky 添加到您的 .button-wrapper

.container {
  width: 400px;
  height:200px;
  border: 1px solid;
  position:relative;
  overflow:auto;
  margin-bottom:4rem;
}

.line {
  height:8px;
  width:100%;
  background-color: grey;
  border-radius: 8px;
  margin-bottom:20px;
}

.text{
  padding: 5px 50px;
}

.button-wrapper{
    position: sticky;
    bottom: 4px;
}
.button-wrapper:after {
  content:'';
  display: table;
  clear: both;
  height: 0;
}

.button{
  width:32px;
  height:32px;
  background-color:orange;
}

.left {
  float: left;
  margin-left: 4px;
}

.right{
  float: right;
  margin-right: 4px;
}

<div class="container">
   <div class="text">
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
   </div>
   <div class="button-wrapper">
    <div class="button left"></div>   
    <div class="button right"></div>
   </div>
 </div>