Scroll element to bottom in dart

Question

I'm trying to set up a scrollable div that automatically scrolls to the bottom when new content is added to it. I've tried these:

this.ele.scrollTop = this.ele.offsetHeight;

this.ele.scrollTop = this.ele.scrollHeight;

But the div remains blissfully stationary at the top. What am I doing wrong?

Answer 1

It is probably this bug https://code.google.com/p/dart/issues/detail?id=18062 you run into.

Workaround in the meantime is to set via dart:js (using repro from #9):

import 'dart:html';
import 'dart:js';

void main() {
  var ta = new TextAreaElement();
  ta.wrap = "off";
  document.body.children.add(ta);
  ta.text = "abcde 01234 (1) abcde 01234 (2) abcde 01234 (3) abcde 01234 (4) "
      "abcde 01234 (5) abcde 01234 (6) abcde 01234 (7) abcde 01234 (8) ";
  new JsObject.fromBrowserObject(ta)['scrollLeft'] = '200';
}

Answer 2

If scrolling to the bottom is desired (rather than scrolling left), then the example from Günter should probably include fetching the current scrollHeight and setting scrollTop accordingly:

    JSObject jsObject = new JsObject.fromBrowserObject(scrollableElement);
    int scrollHeight = jsObject['scrollHeight'];
    jsObject['scrollTop'] = '${scrollHeight}';