我正在做一个小元素,我在其他所有内容下添加了 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;
}``
``
最佳答案
使用 scrollIntoView
捕获元素然后
element.scrollIntoView({ 行为:“自动”, block :“结束”})
在包装文本框的元素上激活它。
当你得到触发器打开/扩展/推送时激活它
关于javascript - 页面展开时如何让页面自动滚动? (可折叠内容),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57763857/