Todos os setTimeouts dentro do javascript para loop acontecem de uma só vez

Esta função deve rolar para baixo a partir do topo da página para 215 pixels abaixo, com um atraso crescente, de modo que o primeiro evento window.scrollTo ocorra a 10ms, o próximo a 20ms e assim por diante.
A última linha deve ser atrasada por 2150 ms, o que demora cerca de 2 segundos.
Em vez disso, ele rola imediatamente 215 pixels de uma só vez.

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

Rosto triste. Por quê?

[obrigado pela ajuda! Eu usei para escrever esta solução final que é um pouco mais complicada, e eu ofereço aqui para qualquer um roubar. Ele rola rápido no começo e depois fica lento. apenas o que eu queria. Usando o setTimeout insteat de setInterval, ele te dá ainda mais controle sobre a curva de velocidade, então você pode facilmente diminuir sua velocidade 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);
    }
  }
}

questionAnswers(2)

yourAnswerToTheQuestion