javascript - 页面展开时如何让页面自动滚动？ (可折叠内容)

Question

我正在做一个小元素，我在其他所有内容下添加了 4 个可折叠的文本框。问题是，当我打开 content1 时，它展开并将 content2-4 推到下面，我试图让它自动向下滚动，这样用户就不必手动滚动来查看其余的可折叠框。它们都在 div 容器中，我对视点和其他方面不太了解，也不确定如何使用 scrollintoview 或将它放在哪里。

In HTML

<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="home.css">

<button class="collapsible">Text 1</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>
<button class="collapsible">Text 2</button>
<div class="content1">
  <p>Lorem ipsum...</p>
</div>
<button class="collapsible">Text 3</button>
<div class="content2">
  <p>Lorem ipsum...</p>
</div>
<button class="collapsible">Text 4</button>
<div class="content3">
  <p>Lorem ipsum...</p>
</div>
<button class="collapsible">Text 5</button>
<div class="content4">
  <p>Lorem ipsum...</p>
</div>

In Css:
.content {
  padding: 0 18px;
  display: none;
  overflow: auto;
  background-color: #005a32;
}
.content1 {
  padding: 0 18px;
  display: none;
  overflow: auto;
  background-color: #f1f1f1;
}

.content2 {
  padding: 0 18px;
  display: none;
  overflow: auto;
  background-color: #005a32;
}

.content3 {
  padding: 0 18px;
  display: none;
  overflow: auto;
  background-color: #f1f1f1;
}

.content4 {
  padding: 0 18px;
  display: none;
  overflow: auto;
  background-color: #005a32;
}``
``

Answer 1

使用 scrollIntoView

捕获元素然后

element.scrollIntoView({ 行为:“自动”， block :“结束”})

在包装文本框的元素上激活它。

当你得到触发器打开/扩展/推送时激活它