Sticky scroll in Scala.JS

Question

I'm trying to do the same a this answer in Scala.JS: https://stackoverflow.com/a/21067431

According to his exemple: http://jsfiddle.net/dotnetCarpenter/KpM5j/
I tried to redo here: https://scalafiddle.io/sf/gKgxQY0/3277

import scalatags.JsDom.all._
import scala.concurrent.duration._
import org.scalajs.dom

println(div(id := "logs", style := "height: 100px"))

js.timers.setInterval(1.millisecond) {
  val logs = dom.document.getElementById("logs")

  val isScrolledToBottom = logs.scrollHeight - logs.clientHeight <= logs.scrollTop + 1

  val child = dom.document.createElement("div")
  child.innerHTML = s"isScrolledToBottom: $isScrolledToBottom"
  logs.appendChild(child)

  if (isScrolledToBottom) logs.scrollTop = logs.scrollHeight - logs.clientHeight

  val child2 = dom.document.createElement("div")
  child2.innerHTML = s"logs.scrollTop: ${logs.scrollTop}"
  logs.appendChild(child2)
}

Does anyone see why the Scala.JS version is not working?

Cheers

score 0 · Accepted Answer · answered Jul 07 '17 at 10:13

Ok that was because I didn't add the overflow:auto on the div: https://scalafiddle.io/sf/gKgxQY0/3294

import scalatags.JsDom.all._
import scala.concurrent.duration._
import org.scalajs.dom

println(div(id := "logs", style := "overflow:auto; height: 100px"))

js.timers.setInterval(1.second) {
  val logs = dom.document.getElementById("logs")

  val isScrolledToBottom =
    logs.scrollHeight - logs.clientHeight <= logs.scrollTop + 1

  val child = dom.document.createElement("div")
  child.innerHTML = s"isScrolledToBottom: $isScrolledToBottom"
  logs.appendChild(child)

  if (isScrolledToBottom)
    logs.scrollTop = logs.scrollHeight - logs.clientHeight
}

Sticky scroll in Scala.JS

1 Answers1