Question

我在我编写的基于文本的游戏中有一个 div 元素，您可以在其中看到之前的命令和操作的返回文本，并且我希望在 div 内有一个滚动条，这是我制作的，但是当添加内容时滚动条不会改变位置，所以你停留在顶部，所以我需要一种方法来在添加内容时将 div 内的滚动设置到底部。我的 HTML 在下面。

    <!DOCTYPE html>
<head>
<style>
#contentWrapper{
 border-color:crimson;
 border-style: solid;
 border-width: 2px;
 height: 400px;
overflow: scroll;
    position:relative;
}
content:{
height: 400px;
}
</style>
</head>
<div id = 'contentWrapper'> 
  <div id = 'content'> 
  <p>  content </p>
             
  </div>
</div>

Answer 1

您可以使用 JavaScript 做到这一点。根据您获得结果的方式，您必须根据自己的需要对其进行编辑。如果每次给出答案时都重新加载页面，则可以保持代码不变。另一方面，如果你通过 Ajax 得到结果和下一个问题，那么在响应函数上你应该总是再次找到 div 并在每次有新结果可用时重新运行 JS 代码

var objDiv = document.getElementById("contentWrapper");
objDiv.scrollTop = objDiv.scrollHeight;

#contentWrapper{
  background-color:red;
  border-color:crimson;
  border-style: solid;
  border-width: 2px;
  height: 200px;
  overflow: scroll;
  position:relative;
}
content:{
  height: 400px;
}

<div id = 'contentWrapper'> 
  <div id = 'content'> 
    <p>  content1 </p>
    <p>  content2 </p>  
    <p>  content3 </p>
    <p>  content4 </p>   
    <p>  content5 </p>
    <p>  content6 </p>   
    <p>  content7 </p>
    <p>  content8 </p>   
  </div>
</div>

将div元素内的滚动位置设置为底部？

1 个答案: