Todos los setTimeouts dentro de javascript para bucle ocurren a la vez

Esta función debería desplazarse hacia abajo desde la parte superior de la página a 215 píxeles debajo, con un retraso cada vez mayor, de modo que el primer evento window.scrollTo suceda a los 10 ms, el siguiente a los 20 ms, etc.
La última línea se debe retrasar en 2150 ms, por lo que en total toma alrededor de 2 segundos.
En su lugar, se desplaza inmediatamente hacia abajo 215 píxeles a la vez.

function scrollDown() {
  var yFinal=216, delay=0;
  for (y=0; y<yFinal; y++) {
    delay = delay+10
    setTimeout(function() {
      window.scrollTo(100,y);
    },delay);
  }
}

Cara triste. ¿Por qué?

[edit: gracias por la ayuda! Lo usé para escribir esta solución final, que es un poco más complicada, y la ofrezco aquí para que cualquier persona la robe. se desplaza rápido al principio, luego lento. Justo lo que quería. al usar setTimeout insteat de setInterval, te da aún más control sobre la curva de velocidad, por lo que fácilmente podrías hacer que disminuya la velocidad exponencialmente]

function showCategory(categoryId)
{
  var yInitial=document.body.scrollTop,
      yFinal=216,
      delay=0;

  if (yInitial<yFinal)
  {
    yInitial=(yFinal-yInitial)/1.3+yInitial;
    window.scrollTo(100, yInitial);

    for (var yCurrent = yInitial; yCurrent < yFinal; yCurrent+=2)
    {
      delay += 30;
      (function(position)
      {
        setTimeout(function()
        {
          window.scrollTo(100, position);
        }, delay);
      })(yCurrent);
    }
  }
}

Respuestas a la pregunta(2)

Su respuesta a la pregunta