Scrollbare div-stick nach unten, wenn die äußeren div-änderungen in der Größe

Hier ist ein Beispiel-chat-app ->

Die Idee hier ist, um die .messages-container nehmen so viel von dem Bildschirm, wie Sie können. Innerhalb .messages-container, .scroll hält die Liste der Nachrichten, und in Fall gibt es mehr Nachrichten, die dann die Größe des Bildschirms, scrollt.

Nun, betrachten diesen Fall:

Der Benutzer führt einen Bildlauf auf der Unterseite von der Gespräch
Die .text-input dynamisch größer

Nun, statt die user bleiben gerollt um die Unterseite des Gesprächs, der text-input erhöht, und Sie nicht mehr auf den Grund sehen.

Einen Weg, um es zu beheben, wenn wir reagieren, berechnen Sie die Höhe der text-input, und wenn sich etwas ändert, lassen .Nachrichten-container weiß

componentDidUpdate() {
  window.setTimeout(_ => {
    const newHeight = this.calcHeight();
    if (newHeight !== this._oldHeight) {
      this.props.onResize();
    }
    this._oldHeight = newHeight;
  });
}

Aber, dies verursacht sichtbare performance-Probleme, und es ist traurig, übergeben werden Nachrichten wie diese.

Gibt es eine bessere Möglichkeit? Könnte ich den Einsatz von css in einer Weise, um auszudrücken, dass, wenn .text-input-erhöht, ich möchte im wesentlichen shift up alle .Nachrichten-container

Bitte erläutern Sie das css/js verwendet, um zu wachsen die text-Eingabe.
Können Sie eine Geige besser zu aufwendige dein problem?
Über die Größe des input-Textes, darf ich Fragen, warum ein Benutzer sollte in der Lage sein, das zu tun? ... Die meisten chat-apps nicht, und wenn Sie es tun, Sie nicht step-up-Nachrichten, wenn ein Benutzer die Größe ändern, damit die Benutzer eine bewusst dieses Verhalten (Skype zum Beispiel).
Warum willst du die Größe des text-input?
Die chat-app, die wir verwenden bei der Arbeit nicht lassen Sie das Feld "Eingabe" geändert werden, und es ist ein sehr praktisches feature (nicht das Gespräch Bildlauf nach unten, aber es wäre schön, wenn es auch Tat). Normalerweise habe ich die Größe auf nur eine oder zwei Zeilen, so dass ich sehen kann, mehr von der Konversation, aber manchmal ich brauche, um längere Kommentare dazu kann gehören, dass copy/Paste-Inhalt, code-Schnipsel, oder sogar Listen mit Aufzählungszeichen. In diesen Fällen, die ich mag in der Lage sein zu sehen, wie mein ganzer Kommentar, bevor ich Sie senden.

InformationsquelleAutor Stepan Parunashvili | 2015-12-10

21

2:nd revision dieser Antwort

Dein Freund hier ist flex-direction: column-reverse; die Sie bitten, während richten Sie die Nachrichten am unteren Rand des message-Containers, wie zum Beispiel Skype und viele andere chat-apps tun.
```
.chat-window{
  display:flex;
  flex-direction:column;
  height:100%;
}
.chat-messages{
  flex: 1;
  height:100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.chat-input { border-top: 1px solid #999; padding: 20px 5px }
.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }
```
Den Nachteil mit flex-direction: column-reverse; ist ein bug in IE/Edge/Firefox, wo die Scrollbalken nicht erscheinen, die Ihr mehr dazu Lesen Sie hier: Flexbox-column-reverse-und überlauf in Firefox/IE

Den Kopf ist Sie ~ 90% browser-Unterstützung auf mobile/Tabletten und ~ 65% für desktop und zählen als Fehler wird behoben, ...und gibt es einen workaround.
```
//scroll to bottom
function updateScroll(el){
  el.scrollTop = el.scrollHeight;
}
//only shift-up if at bottom
function scrollAtBottom(el){
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}
```
In den folgenden code-snippet habe ich die 2 Funktionen von oben, um IE/Edge/Firefox Verhalten sich in der gleichen Weise flex-direction: column-reverse; tut.

JS:
```
function addContent () {
  var msgdiv = document.getElementById('messages');
  var msgtxt = document.getElementById('inputs');
  var atbottom = scrollAtBottom(msgdiv);

  if (msgtxt.value.length > 0) {
    msgdiv.innerHTML += msgtxt.value + '<br/>';
    msgtxt.value = "";
  } else {
    msgdiv.innerHTML += 'Long long content ' + (tempCounter++) + '!<br/>';
  }
  
  /* if at bottom and is IE/Edge/Firefox */
  if (atbottom && (!isWebkit || isEdge)) {
    updateScroll(msgdiv);
  }
}

function resizeInput () {
  var msgdiv = document.getElementById('messages');
  var msgtxt = document.getElementById('inputs');
  var atbottom = scrollAtBottom(msgdiv);

  if (msgtxt.style.height == '120px') {
    msgtxt.style.height = 'auto';
  } else {
    msgtxt.style.height = '120px';
  }
  
  /* if at bottom and is IE/Edge/Firefox */
  if (atbottom && (!isWebkit || isEdge)) {
    updateScroll(msgdiv);
  }
}


/* fix for IE/Edge/Firefox */
var isWebkit = ('WebkitAppearance' in document.documentElement.style);
var isEdge = ('-ms-accelerator' in document.documentElement.style);
var tempCounter = 6;

function updateScroll(el){
  el.scrollTop = el.scrollHeight;
}
function scrollAtBottom(el){
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}
```
CSS:
```
html, body { height:100%; margin:0; padding:0; }

.chat-window{
  display:flex;
  flex-direction:column;
  height:100%;
}
.chat-messages{
  flex: 1;
  height:100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.chat-input { border-top: 1px solid #999; padding: 20px 5px }
.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }


/* temp. buttons for demo */
button { width: 12%; height: 44px; margin-left: 5%; vertical-align: top; }

/* begin - fix for hidden scrollbar in IE/Edge/Firefox */
.chat-messages-text{ overflow: auto; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .chat-messages-text{ overflow: visible; }
  /*  reset Edge as it identifies itself as webkit  */
  @supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } }
}
/* hide resize FF */
@-moz-document url-prefix() { .chat-input-text { resize: none } }
/* end - fix for hidden scrollbar in IE/Edge/Firefox */
```
HTML:
```
<div class="chat-window">
  <div class="chat-messages">
    <div class="chat-messages-text" id="messages">
      Long long content 1!<br/>
      Long long content 2!<br/>
      Long long content 3!<br/>
      Long long content 4!<br/>
      Long long content 5!<br/>
    </div>
  </div>
  <div class="chat-input">
    <textarea class="chat-input-text" placeholder="Type your message here..." id="inputs"></textarea>
    <button onclick="addContent();">Add msg</button>
    <button onclick="resizeInput();">Resize input</button>
  </div>
</div>
```
Seite Hinweis 1: Das Nachweisverfahren ist nicht vollständig getestet, aber es sollte funktionieren auf neueren Browsern.

Seite Hinweis 2: Befestigen Sie eine resize-Ereignisprozedur für die chat-Eingabe könnte effizienter sein, dann ruft die updateScroll Funktion.

Hinweis: die Credits zu Gefährliche für die Wiederverwendung seiner html-Struktur
- Wie kommen Sie und @Gefährlicher verwendet haben, die gleichen Beispiele?
- Einfach, ich überprüfte seine Lösung/fiddle, bevor ich mich, um zu sehen, ob es funktionierte gut, und dann sah ich ein besserer Weg als der, den er vorgeschlagen hat, so habe ich beschlossen, zu beheben sein in der Art wie der OP fragte, machen es einfach, die beiden zu vergleichen.
- Am Liebsten würde ich Sie mir gutgeschrieben, wenn Sie veröffentlicht Ihre Lösung.
- Ich werde die Gutschrift, die Sie für Kredite Ihrer html-Struktur, die wichtiger Teil des CSS komplett neu geschrieben, obwohl ich wiederverwendet, die der gleichen Klasse Namen. Dies ist nicht ungewöhnlich, dass einige verwendet Teile Ihrer bereits geposteten code, einige sogar eine vollständige Kopie ändern 1 Zeile und schicken Sie es als Ihre eigenen (was ich nicht und nie tun würde). Wenn Sie möchten, einfach analysieren durch meine älteren Antworten und Sie werden feststellen, einige von Ihnen beweisen, habe ich nicht stehlen Ihre Idee hier.
- Keine Sorge.....
- Hey @LGSon, das problem ist, wenn Sie die Bildlauf nach unten, und die textarea-Größe erhöht. Sie können feststellen, dass, wenn Sie das tun, werden die Nachrichten nicht mehr fest auf den Boden.
- Die letzten Nachrichten sind noch immer ausgeblendet, wenn Sie die Größe des Eingabe-Feld.
- Ja, und ich schrieb, warum/was ist zu tun, um das zu beheben, die entweder mit dem gleichen Skript, macht es die Größe, oder binden Sie ein resize-Ereignis auf die textarea, die immer bevorzugt werden. Ich bin sicher, die OP ist auch fähig, das zu tun, sich selbst, und danke für den Kommentar, ich werde aktualisieren, sobald mehr mit info.
- Ich überarbeitete meine Antwort und nun zu Ihrer Anfrage passen für alle Browser, die nicht über die bekannten scrollbar Problem, für den rest, ein work-around, um zu versuchen, halten Sie dasselbe Verhalten.
- Warum ist dies immer so viele upvotes? In nicht-Webkit-Browsern, aber diese Lösung macht es unmöglich, scrollen Sie in der Nachrichtenliste-auch durch auswählen und ziehen-so es gibt keine Weise, zurück zu blicken auf die Kommentare, die Sie verpassten, sobald Sie einen Bildlauf durchgeführt haben aus dem Blick. Das ist eine ziemlich show-stopping Einschränkung. Mir gefällt der Ansatz anders, obwohl. Jede Möglichkeit der Festsetzung der scrolling-Probleme im IE/Edge/FF?
- Wenn Sie die Anweisungen befolgen, die durch das entfernen flex-direction: column-reverse; aus der css-Datei und kommentieren Sie die // updateScroll(msgdiv); Teil im Skript, es wirkt fast das gleiche wie in webkit-Browsern.
- Die Webkit-only-Lösung ist genial (abgesehen davon, dass Webkit-nur), aber ich finde es schwierig, mir eine elegante Möglichkeit zur Implementierung sowohl it-als auch die JavaScript-basierte Lösung bei der gleichen Zeit. Es scheint fast überflüssig, beide zu verwenden. Wenn man zeigen könnte, die abgeschlossenen cross-Plattform-Lösung in Ihrer Antwort anstatt nur zu beschreiben, könnte es ein wenig leichter zu sehen, was Sie im Sinn haben.
- Hey @LGSon, bin ich dann fein mit einem webkit einzige Lösung. Aber, wenn die Eingabe geändert wird, tut Es löst ein scrollen, statt shortering die .Gespräch. Ist das beabsichtigt? Die Idee für bei der Eingabe dynamisch ändern, ist, dass dann das Gespräch wird kleiner
- Nein, es ist nicht, ich werde das prüfen und aktualisieren Sie bald.
- Antwort aktualisiert, mein Fehler, die .input-container { height: 80px } hatte Feste Höhe und müssen Flüssigkeit .input-container { min-height: 80px }
- Wenn Sie gut mit ein Webkit-only-Lösung, sollten Sie erwähnen, dass in deiner Frage. Das hätte einen sehr großen Einfluss auf die Antworten ist am besten, imo.
- Vielen Dank für die Bearbeitungen; sieht besser aus, als ich es Malte. Ein letzter Tipp: fügen Sie einen "resize input" - Taste, um das snippet zu zeigen, dass es funktioniert, wenn das input-Feld geändert wird. Es nicht funktionieren, wenn ich die Größe der textarea im FF (nicht muss), und IE noch nicht veränderbare Texteingabefelder, so ist es ein bisschen schwer zu testen. Sicher, ich könnte schreiben, dass meine eigenen test, aber da der OP ausdrücklich erwähnt, dass dieses Szenario in seiner Frage, denke ich, eine vollständige Antwort sollte es zu bedecken. Natürlich, es wird ein nicht-Thema, wenn er seine Frage wk-nur. In diesem Fall werde ich upvote diese Antwort.
- Nochmals vielen Dank für Ihren Kommentar. Ich habe eine vollständige Antwort, mit eine Beschreibung über genau das resize-Teil, immer noch, hier ist ein Turnschuh, damit Sie sehen, dass es funktioniert, jsfiddle.net/7avwkcbk/12, mit dem extra-resize input-Taste. Auch müssen Sie erkennen, dass die webkit-nur ist da ein bug im Rand/Firefox und nicht als ein webkit-only, und sobald der bug behoben, mein workaround kann nur gelöscht werden, mit dem Haupt-code intakt.
- Ich in der Regel würde nicht upvote eine Antwort, die Kompatibilitätsprobleme-- unabhängig von Ihrer Ursache-wenn es eine komplette cross-Plattform-Antwort, die bereits arbeiten.
- Machte ich eine funktionierende Lösung, so haben Sie es, ich brauchte, um zu überwinden-ein Fehler, du benutzt ein hack, unterm Strich, ist es für die OP zu wählen, den er finden die beste Lösung für seine Bedürfnisse, also ich verstehe eigentlich nicht, warum du machst Bemerkungen über meine Lösung die ganze Zeit, wie es ist nicht Ihr Anruf.
- Ich schlug vor, Möglichkeiten für Sie zu verbessern Ihre Antwort, die ist, was Kommentare sind für. Nimm es nicht so persönlich. Deine Antwort ist besser als ein Ergebnis. Ich habe meinen Standpunkt, so werde ich aufhören, nervt Sie jetzt. (Wir können besprechen, was qualifiziert als "hack" an anderer Stelle, wenn Sie möchten).
InformationsquelleAutor LGSon
11

Sie brauchen nur eine CSS-Regel festlegen:
```
.messages-container, .scroll {transform: scale(1,-1);}
```
Ist es, Sie sind fertig!

, Wie es funktioniert: Erstens, es vertikal spiegelt das container-element, so dass die oben wird unten (geben Sie uns die gewünschte scroll-Orientierung), dann schlägt das content-element, so dass die Nachrichten nicht auf den Kopf.

Dieser Ansatz funktioniert in allen modernen Browsern. Es ist eine seltsame Nebenwirkung, obwohl: wenn Sie ein Mausrad verwenden, die in der message-box, die Laufrichtung ist Umgekehrt. Dies kann behoben werden, mit ein paar JavaScript-Zeilen, wie unten gezeigt.

Hier ist eine demo und ein fiddle zu spielen:

JS:
```
//Reverse wheel direction
document.querySelector('.messages-container').addEventListener('wheel', function(e) {
  if(e.deltaY) {
    e.preventDefault();
    e.currentTarget.scrollTop -= parseFloat(getComputedStyle(e.currentTarget).getPropertyValue('font-size')) * (e.deltaY < 0 ? -1 : 1) * 2;
  }
});

//The rest of the JS just handles the test buttons and is not part of the solution
send = function() {
  var inp = document.querySelector('.text-input');
  document.querySelector('.scroll').insertAdjacentHTML('beforeend', '<p>' + inp.value);
  inp.value = '';
  inp.focus();
}
resize = function() {
  var inp = document.querySelector('.text-input');
  inp.style.height = inp.style.height === '50%' ? null : '50%';
}
```
CSS:
```
html,body {height: 100%;margin: 0;}
.conversation {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.messages-container {
  flex-shrink: 10;
  height: 100%;
  overflow: auto;
}
.messages-container, .scroll {transform: scale(1,-1);}
.text-input {resize: vertical;}
```
HTML:
```
<div class="conversation">
  <div class="messages-container">
    <div class="scroll">
      <p>Message 1<p>Message 2<p>Message 3<p>Message 4<p>Message 5
      <p>Message 6<p>Message 7<p>Message 8<p>Message 9<p>Message 10
    </div>
  </div>
  <textarea class="text-input" autofocus>Your message</textarea>
  <div>
    <button id="send" onclick="send();">Send input</button>
    <button id="resize" onclick="resize();">Resize input box</button>
  </div>
</div>
```
- gute Idee hier! Ich erhielt die Antwort zu den anderen, vor allem, weil es möglich war, um nicht irgendwelche js, wenn man in webkit. Dies ist eine großartige Lösung, obwohl, und ich werde nicht vergessen, wie raffiniert es ist, zu verwenden, Maßstab für die Zukunft
- Vielen Dank, bin froh, dass es Euch gefällt! Und keine harten Gefühle wieder. Ihre Annahme LGSon Antwort. Ich würde upvote es mich, wenn Sie erwähnt Ihre browser-Einstellungen, die in Ihrer Frage. Ansonsten ist die Kompatibilität König so weit ich bin besorgt (aber ich erwarte nicht, dass jeder so zu denken). Wenn du gehst, mit seiner Lösung, möchten Sie vielleicht zu prüfen, die bug-reports in das SO posten, den er verlinkt. Ich habe den Eindruck, dass eine weitere CSS-Eigenschaft (entweder justify-content oder align-content) wird schließlich erforderlich sein, wenn Webkit folgt die neuesten spec, aber ich könnte falsch sein.
- Die flex-direction:column; justify-content:flex-end macht das gleiche wie flex-direction: column-reverse; justify-content:flex-start obwohl die scrollbar fehlt in webkit, also die fehlenden Blättern ist ein Problem, dass webkit behoben haben für die column-reverse-Eigenschaft und die anderen, die noch kommen werden.
- Ich war auf der Suche auf diese Meldung, dass war mit in einem der bug-threads. Er sagt ausdrücklich, dass die überlauf-Leitung wird bestimmt durch die beiden Eigenschaften, die ich gerade erwähnte, und nicht durch die flex-direction Eigenschaft. Ich würde die nehmen, die meinen, dass Sie dem hinzufügen müssten, eine dieser anderen Eigenschaften zu befassen sich mit Inhalten, die überläufe in der Spitze des Containers, anstatt unten. Ich könnte falsch, aber es. Lest Ihr das anders???
- Interessant, habe nicht gelesen, dass vor. Sie scheint hier, dass justify-content:flex-end wird der sein, der für die Zukunft zu erhalten top-überlauf.
- Aber vielleicht bin ich nicht richtig :). Wenn flex-direction: column-reverse; verschiebt automatisch die flex-start Lage nach unten (was Sinn machen würde), dann vielleicht würden Sie nicht explizit gesetzt, wird die Rechtfertigung, da flex-start ist die Standardeinstellung. Die Start-scroll-position wäre bei flex-start würde, oder nicht? Dies wird beginnen, um mir Kopfschmerzen.
- Das ist, wie es heute funktioniert, auf webkit, Kopfschmerzen oder nicht 🙂 ... und die flex-direction:column; justify-content:flex-end macht das gleiche, obwohl der Mangel scrollen in allen Browsern webkit enthalten. Wir werden sehen, was die großen Jungs später beschließt Sie Ihre updates/specs zu kommen.
- ich habe mit dieser Lösung, wo Ebene flexbox nicht funktioniert aufgrund seiner Feste Größe-Anforderung. Ich bin gleichzeitig beeindruckt an Ihrer Kreativität, und irritiert, dass ein UI-Verhalten, das sollte so offensichtlich die Standard erfordert so viel Arbeit zu bekommen! Du bist ein JavaScript-enabler--und ich meine, dass sowohl das gute und das schlechte Assoziationen... 😛
InformationsquelleAutor DoctorDestructo
2

Bitte versuchen Sie die folgenden fiddle - https://jsfiddle.net/Hazardous/bypxg25c/. Obwohl die fiddle ist derzeit mit jQuery zu wachsen/ändern der Größe der text-Bereich, der Knackpunkt ist in der flex Verwandte Stilrichtungen verwendet für den Nachrichten-container und input-container-Klassen -
```
.messages-container{
  order:1;
  flex:0.9 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:stretch;
  align-content:stretch;
}

.input-container{
  order:2;
  flex:0.1 0 auto;
}
```
Flex-shrink-Wert ist " 1 " gesetzt .Nachrichten-container und 0 für .input-container. Dadurch wird sichergestellt, dass Nachrichten-container schrumpft, wenn es eine Umverteilung von der Größe.
- Hey Gefährlich, das problem ist Folgendes: 1) versuchen, einen Bildlauf nach unten, und erhöhen die input-Größe. Unschärfe unsere, um Sie zu verringern. blur ist wieder in. Beachten Sie, dass, wenn die input-Größe erhöht, das Gespräch wird nicht geklebt, um den Boden mehr.
- Aktualisiert den code leicht, in den Fokus-event-handler den Bildlauf nach unten eingeleitet wird. Nun, wenn die Eingabe den Fokus erhält, das Gespräch wird ganz nach unten scrollen.
InformationsquelleAutor hazardous

Habe ich verschoben text-input innerhalb messages absolute positioniert, es an der Unterseite des Containers und in Anbetracht messages genug unten padding-space entsprechend.

Ausführen von code, um eine Klasse zu conversation werden, ändert sich die Höhe der text-input - und bottom-padding von messages mit einem schönen CSS-transition animation.

JavaScript läuft ein "scrollTo" - Funktion zur gleichen Zeit wie die CSS-übergang ausgeführt wird, halten Sie die scroll am unteren Rand.

Wenn die scroll kommt aus dem Boden wieder, entfernen wir die Klasse von conversation

Hoffe, das hilft.

https://jsfiddle.net/cnvzLfso/5/

JS:

var doScollCheck = true;
var objConv = document.querySelector('.conversation');
var objMessages = document.querySelector('.messages');
var objInput = document.querySelector('.text-input');

function scrollTo(element, to, duration) {
  if (duration <= 0) {
    doScollCheck = true;
    return;
  }
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) {
      doScollCheck = true;
      return;
    }
    scrollTo(element, to, duration - 10);
  }, 10);
}

function resizeInput(atBottom) {
  var className = 'bigger',
    hasClass;
  if (objConv.classList) {
    hasClass = objConv.classList.contains(className);
  } else {
    hasClass = new RegExp('(^| )' + className + '( |$)', 'gi').test(objConv.className);
  }
  if (atBottom) {
    if (!hasClass) {
      doScollCheck = false;
      if (objConv.classList) {
        objConv.classList.add(className);
      } else {
        objConv.className += ' ' + className;
      }
      scrollTo(objMessages, (objMessages.scrollHeight - objMessages.offsetHeight) + 50, 500);
    }
  } else {
    if (hasClass) {
      if (objConv.classList) {
        objConv.classList.remove(className);
      } else {
        objConv.className = objConv.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
      }
    }
  }
}

objMessages.addEventListener('scroll', function() {
  if (doScollCheck) {
    var isBottom = ((this.scrollHeight - this.offsetHeight) === this.scrollTop);
    resizeInput(isBottom);
  }
});

CSS:

html,
body {
  height: 100%;
  width: 100%;
  background: white;
}
body {
  margin: 0;
  padding: 0;
}
.conversation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
}
.messages {
  overflow-y: scroll;
  padding: 10px 10px 60px 10px;
  -webkit-transition: padding .5s;
  -moz-transition: padding .5s;
  transition: padding .5s;
}
.text-input {
  padding: 10px;
  -webkit-transition: height .5s;
  -moz-transition: height .5s;
  transition: height .5s;
  position: absolute;
  bottom: 0;
  height: 50px;
  background: white;
}
.conversation.bigger .messages {
  padding-bottom: 110px;
}
.conversation.bigger .text-input {
  height: 100px;
}
.text-input input {
  height: 100%;
}

HTML:

<div class="conversation">
  <div class="messages">
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is a message content
    </p>
    <p>
      This is the last message
    </p>
    <div class="text-input">
      <input type="text" />
    </div>
  </div>
</div>

InformationsquelleAutor Jamie Barker

0

Schreibst du;

JS:
```
Now, consider this case:

    The user scrolls to the bottom of the conversation
    The .text-input, dynamically gets bigger
```
Wäre das nicht die Methode, die dynamisch legt der .text-Eingabe die logische Ort, um Feuer.Requisiten.onResize().

InformationsquelleAutor J. Mark Stevens

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.