我有一系列元素可以折叠ondragstart，然后使用Bootstrap的Collapse/Show类取消折叠ondragend
我遇到的是，如果用户在页面向下滚动到足够远的位置，删除该元素的高度会使页面底部高于视口的底部，则视口将被迫向上滚动以弥补它，这会取消拖动并调用ondragend，然后取消折叠元素并将文档大小调整到原来的位置， 让它看起来像什么都没发生。
我的问题是：如何强制文档/正文始终足够高以防止自动滚动？
或者，是否有可能以某种方式保持阻力，即使通过卷轴？
我将body的min-height设置为100vh，但这并不能解释页面开始比视口高。
小提琴：https://jsfiddle.net/robertgreenstreet/jcodbv5n/21/
我看到您的部分被form元素包裹。
<form>
<section</section>
<section</section>
<section</section>
<section</section>
</form>
如果在折叠任何卡片之前，您检测到表单的实际高度并使用element.style.height强制它保持该高度怎么办？
像这样：
function setHeight(element) {
element.style.height = element.offsetHeight + "px";
}
function clearHeight(element) {
element.style.height = "";
}
我还没有尝试过，但我怀疑它会满足您的需求。
这是一个小演示，它似乎工作得很好。
function setHeight(element) {
element.style.height = element.offsetHeight + "px";
}
function clearHeight(element) {
element.style.height = "";
}
const wrapper = document.getElementById('wrapper');
const el2 = document.getElementById('el2');
const el3 = document.getElementById('el3');
function collapse () {
setHeight(wrapper);
el2.classList.add('collapse');
el3.classList.add('collapse');
setTimeout( () => clearHeight(wrapper), 2000);
}
function expand () {
clearHeight(wrapper)
el2.classList.remove('collapse');
el3.classList.remove('collapse');
}#wrapper {
background-color: #ccc;
padding: 0.5rem;
}
#el1, #el2, #el3, #el4 {
border: 1px solid gray;
margin: 2px;
padding: 0.5rem;
background: white;
}
.el {
height: 40px;
}
.collapse {
height: 12px;
}<body>
<button onclick="collapse();">Collapse el 2 and 3</button>
<button onclick="expand();">Expand el 2 and 3</button>
<div id="wrapper">
<div id="el1" class="el">el1</div>
<div id="el2" class="el">el2</div>
<div id="el3" class="el">el3</div>
<div id="el4" class="el">el4</div>
wrapper
</div>
</body>