更改div'；时始终向下推内容；在不改变页面位置的情况下调整页面高度 在内容的中间，我有一个带有 div 的页面，其高度可以从JavaScript改变。

当div高度更改时，如何控制页面滚动的方式？我希望内容总是向下推，而不是向上推

当前，根据单击按钮时页面滚动的位置，内容被向下或向上推

下面是一个简单的例子：

功能切换（ev）{
const div=document.querySelector（“div”）；
如果（div.style.height==“336px”）{
div.style.height=“147px”；
}否则{
div.style.height=“336px”；
}
}

body{最大宽度：60em；边距：auto；}

切换div大小

如果我理解正确，您希望每次设置高度时都在底部滚动

function toggle(ev) {
  const div = document.querySelector("div");
  if (div.style.height === "336px") {
    div.style.height = "147px";
  } else {
      div.style.height = "336px";
  }
  div.scrollTop = div.scrollHeight
}

---

您可以使用

窗口滚动至所选元素。滚动至

功能

正文{最大宽度：60em；边距：自动；}
功能切换（ev）{
const div=document.querySelector（“div”）；
如果（div.style.height==“336px”）{
div.style.height=“147px”；
}否则{
div.style.height=“336px”；
}
window.scrollTo（0，div.scrollHeight）；
}

切换div大小

页面将保持当前活动元素（即您单击的按钮）在视图中，因此额外的高度将根据按钮相对于屏幕的位置向上或向下移动

您要做的是使页面看起来在元素展开后没有向上滚动。要做到这一点，我们只需将页面滚动回元素展开之前的位置-这使页面看起来好像高度向下展开

1。保存页面顶部的当前位置

var pagePosBeforeExpand = window.pageYOffset;

2。如果div已展开，请将页面滚动回更改高度之前的位置：

// if we are increasing the height, then scroll to the previous top...
window.scrollTo({ top: pagePosBeforeExpand });

请注意，当您再次折叠高度时，这不会产生影响，因为您在问题中没有要求这样做，但是您可以调整它以适应该场景-例如，您可以简单地将滚动代码移动到

if

之外执行

工作示例：

功能切换（ev）{
//1.保存页面顶部的当前位置
var pagePosBeforeExpand=window.pageYOffset；
const div=document.querySelector（“div”）；
如果（div.style.height==“336px”）{
div.style.height=“147px”；
}否则{
div.style.height=“336px”；
//2.将页面滚动回更改高度之前的位置
scrollTo（{top:pagePosBeforeExpand}）
}
}

body{最大宽度：60em；边距：auto；}

内容提要
切换div大小

在更新内容高度之前，请尝试模糊元素（例如单击处理程序上的target.blur（）），使其处于非活动状态。由于窗口不再将按钮视为活动按钮，因此它将不再滚动页面以使其保持在视图中

const handleClick = e => {
    e.target.blur()
    updateScrollHeight()
}

功能切换（ev）{
const div=document.querySelector（“div”）；
ev.target.blur（）；
如果（div.style.height==“336px”）{
div.style.height=“147px”；
}否则{
div.style.height=“336px”；
}
}
document.querySelector（“按钮”）.addEventListener（“单击”，切换）
body{最大宽度：60em；边距：auto；}

切换div大小
这不是我想要的解决方案，因为它会移动整个页面。我想要的行为与我的示例中的相同，即使按钮靠近窗口顶部。i、 e.最上面的一段永远不要移动。@fouronnes我误解了您的意图，但是我的答案中的解释仍然准确，因此我们知道发生了什么，我将编辑答案，使其以您需要的方式工作，但仍然不是我要找的。我希望当div高度改变底部段落和按钮移动，而不是顶部段落时，我会这样做。@fouronnes您之前检查时，我没有更新我的答案。我已经更新了我的答案，它的工作方式你想要的-你可以看到它，如果你把代码段扩展到整页。默认操作是滚动页面，使按钮不移动，因此您需要将页面滚动回您想要的位置，这是执行此操作的方法：）不，我不想滚动页面或div。不，我不想滚动页面。如果最上面的段落已经在视图中，它就不应该移动了！