0
PHPとMySQLを使用して私のウェブサイトに簡単なIM機能を追加しようとしています。埋め込まれたiframeにメッセージがあるので、ページ全体をリフレッシュして再描画することなく頻繁にリフレッシュさせることができます。問題は、最新のメッセージがテキストやその他のIMのような形式でメッセージを読み込み、古いメッセージを取得するためにスクロールすることです。それは、すべて最新のテキストを表示するページを表示できないことを除いて、すべて正常に動作します。コンテンツを最後までスクロールする
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>
\t </div>このコンテンツをロードすることになり、私たちは、スクロールしなくても、ボックスの下部にある最後の行を見ることになります。ご覧のとおり、element.scrollheight関数を使用しようとしましたが、機能しません。 = jQueryのセレクター：あなたは
$(".messageContent:last-child")[0].scrollIntoView()
$（ "最後の子messageContent"）を行うことができますjqueryのを使用して
http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div – tech2017
@techLove私は、私は、それを試してみましたが、それは仕事を得ることができませんでしたiframe自体とiframe内のページのコンテンツの両方で試しました。 – Lordbug