将元素大小调整到容器或屏幕外部的底部

Question

我有一个带有

resize: both

的 div 和一个可滚动容器。 我想将它拖到底部并看到我的 div 无限增长并且容器滚动到顶部。纯 CSS 可以做到这一点吗？同样的问题也适用于拖动文本区域

.container{
  height:100%;
  width:100%;
  overflow:scroll
}

.content{
  width:90%;
  height:200px;
  resize:vertical;
  border:solid 1px;
  margin-bottom:20px;
  overflow:scroll
}

<div class='container'>
  <div class='content'>
    <div>
      This <br>
      should <br>
      disappear<br>
      when<br>
      you<br>
      drag<br>
      to<br>
      bottom<br>
    </div>
  </div>
</div>

Answer 1

我认为这不能仅用 CSS 来完成。 CSS 无法动态管理滚动行为以响应用户交互（例如调整元素大小）。我们应该可以使用 JavaScript 来实现这个效果。

const container = document.querySelector('.container');
const content = document.querySelector('.content');

resizable.addEventListener('mousemove', () => {
    container.scrollTop = 0;
});

.container{
  height:100%;
  width:100%;
  overflow:scroll
}

.content{
  width:90%;
  height:200px;
  resize:vertical;
  border:solid 1px;
  margin-bottom:20px;
  overflow:scroll
}

<div class='container'>
  <div class='content'>
    <div>
      This <br>
      should <br>
      disappear<br>
      when<br>
      you<br>
      drag<br>
      to<br>
      bottom<br>
    </div>
  </div>
</div>