加载内容一直滚动到底部

时间：2017-05-15 14:47:32

标签： html css html5 css3 iframe

我正在使用PHP和MySQL为我的网站添加简单的IM功能。我在嵌入式iframe中有消息，这样我就可以经常刷新它们，而无需刷新和重绘整个页面。问题是我希望以类似于文本或其他IM的格式加载消息，其中最新的位于底部，然后向上滚动以获取旧消息。一切正常，除了我无法使用最新的文本加载页面。

如何在iframe完成加载后强制iframe的内容滚动到底部？

function scrollBottom(){
  var element = document.getElementById("messageFrame");
  element.scrollTop = element.scrollHeight;
}
p, h5 {
  display: inline-block;
  float: left; 
}
p {
  width: 90%;
}
h5{
  width: 10%;
}
section *{
  display: inline-block;
}
section h5 {
  font-weight: bold;
  font-size: 16px;
  width: auto;
  margin-left: 5px;
}
section h6 { 
  width: 10%;
  display: inline-block;
  float: right;
  margin: 0;
}
section p {
  text-align: center;
}
.row {
  padding: 15px;
  width: 100%;
  margin: 0;
}
.messageContent {
  width: 90%;
}
.row section{
  width: 100%;
}
<div class="container-fluid">
        <div class="row" style="overflow: auto;" onload="scrollBottom();">
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here<br />
</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">test</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">test</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">You should see this without scrolling</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">You should see this without scrolling</p>
          </div>
          <h6>You should see this without scrolling</h6>
        </section>
     </div>
	</div>

在一个完美的世界中，这个内容会加载，我们会看到框底部的最后一行而不必滚动。正如您所看到的，我尝试使用element.scrollheight函数，但它无效。

2 个答案:

答案 0 :(得分：1)

看，首先，你不能从div调用onload所以最好将代码放在div之后


既然您可以实际调用代码，请尝试使用jquery或其他内容来验证，因为我确信此代码是正确的，请在浏览器中尝试。

＆＃13;
＆＃13; 
function scrollBottom(){
   alert("this does not work"); 
   var element = document.getElementById("messageFrame");
   element.scrollTop = element.scrollHeight;
 }
＆＃13; 
p, h5 {
  display: inline-block;
  float: left; 
}
p {
  width: 90%;
}
h5{
  width: 10%;
}
section *{
  display: inline-block;
}
section h5 {
  font-weight: bold;
  font-size: 16px;
  width: auto;
  margin-left: 5px;
}
section h6 { 
  width: 10%;
  display: inline-block;
  float: right;
  margin: 0;
}
section p {
  text-align: center;
}
.row {
  padding: 15px;
  width: 100%;
  margin: 0;
}
.messageContent {
  width: 90%;
}
.row section{
  width: 100%;
}
＆＃13; 
<div class="container-fluid">
        <div class="row" id="messageFrame" style="overflow: none;" onload="scrollBottom()">
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here<br />
</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">test</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">text goes here</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">text goes here</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">test</p>
          </div>
          <h6>text goes here</h6>
        </section>
        <section>
          <div class="messageContent">
            <h5 style="max-width: 10%;">You should see this without scrolling</h5>
            <p style="width: 80%; text-align: left; word-wrap: break-word;">You should see this without scrolling</p>
          </div>
          <h6>You should see this without scrolling</h6>

        </section>
     </div>
             <script type="text/javascript">
                alert("this works");
                var element = document.getElementById("messageFrame");
                element.scrollTop = element.scrollHeight;
            </script>
	</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用jquery你可以做

$(".messageContent:last-child")[0].scrollIntoView()

$（“。messageContent：last-child”）= Jquery选择器。

[0]选择结果的第一个元素。

.scrollintoview：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

下面的Good Call，onload仅对正文有效，因为javascript在地方被执行（因为渲染器获取内容）你可以在你的div之后添加一个脚本标记，当我们jQuery确保库之前加载你的函数调用。

相关问题
最新问题