文章/答案/技术大牛

发布

问加载滚动到底部的内容
EN

Stack Overflow用户

提问于 2017-05-15 22:47:32

回答 2查看 36关注 0票数 0

我正在努力添加简单的即时消息功能到我的网站使用PHP和MySQL。我将消息放在一个嵌入的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函数，但它不起作用。

html

css

iframe

回答 2

Stack Overflow用户

发布于 2017-05-15 23:24:18

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

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

function scrollBottom(){
   alert("this does not work"); 
   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" 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>

票数 1

Stack Overflow用户

发布于 2017-05-15 22:56:06

通过使用jquery，您可以

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

$(".messageContent:last-child") = Jquery选择器。

选择器结果的第一个元素。

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

下面的调用很好，onload只对body有效，因为javascript是就地执行的(当渲染器获得内容时)你可以在你的div后面添加一个脚本标记，当使用jQuery时，确保在你的函数调用之前加载了这个库。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43982481

复制

相似问题

问加载滚动到底部的内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载滚动到底部的内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载滚动到底部的内容
EN