Loading Inhalt scrollte den ganzen Weg nach unten

Question

Ich arbeite an Hinzufügen von einfachen IM-Funktionalität auf meiner Website mit PHP und MySQL. Ich habe die Nachrichten in einem eingebetteten iframe, damit ich sie von Zeit zu Zeit aktualisieren kann, ohne die ganze Seite aktualisieren und neu zeichnen zu müssen. Das Problem ist, dass ich möchte, dass die Nachrichten in einem ähnlichen Format wie Texte oder andere IMs geladen werden, wobei sich das Neueste unten befindet, und dann scrollen Sie nach oben, um alte Nachrichten zu erhalten. Das alles funktioniert gut, außer dass ich die Seite nicht laden kann, die mit dem aktuellsten Text angezeigt wird.

Wie erzwinge ich, dass der Inhalt des iframe nach dem Laden nach unten scrollt?

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>

In einer perfekten Welt würde diese Inhalte laden, und wir würden ohne scrollen, die letzte Zeile am unteren Rand der Box sehen. Wie Sie sehen können, habe ich versucht, die element.scrollheight-Funktion zu verwenden, aber es funktioniert nicht.

Answer 1

von jquery verwenden könnten Sie tun

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

$ ("messageContent. Last-child") = JQuery-Selektor.

[0] erstes Element des Selektorergebnisses.

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

Answer 2

Blick, erstes, was zuerst, man kann nicht eine onload aus einem div nennen, so würde am besten sein, den Code nach dem div setzen

Nun, da Sie die tatsächlich anrufen code versuche, jquery oder etwas anderes zu verwenden, um zu überprüfen, wie sicher dieser Code ist, versuche es in deinem Browser.

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> 
 
\t </div>