Question

我已经构建了一个在网页上运行的Messenger应用程序。当输入更多输入（并且页面高度增加）时，文本离开屏幕底部并且用户必须向下滚动。有没有办法自动让页面不断滚动到底部以避免这个问题。页面还有一个自举页眉和脚，必须始终保持在视图中。这可能与css或我将如何实现它？

body {
  padding: 5%;
  padding-top: 13%;
  background-image: url(/img/bg.jpg);
  background-size: cover;   
  background-attachment: fixed;
}

Answer 1

您可以使用jQuery（或JavaScript）完成此操作。但你不能只用CSS做到这一点。

这是您的新代码：

setInterval(function () {
  $("html, body").scrollTop($("body").height());
},10);

//Stick to bottom code
setInterval(function () {
  $("html, body").scrollTop($("body").height());
},10);

//Expanding body width
//  - This isn't what you'd add to your code
setInterval(function () {
  $("<div>")
    .addClass("build")
    .appendTo("#container");
},500);

div.build {
  width:100%;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

HTML，CSS自动滚动页面到底部

1 个答案: