Dirección de desplazamiento inversa con 180 listas de desplazamiento invertidas

Estoy creando una aplicación iónica / angular y estoy en una situación en la que me gustaría invertir la dirección de desplazamiento en la entrada de desplazamiento.

Aquí puedes encontrar un ejemplo de mi situación:Ejemplo de jsfiddle

En el ejemplo anterior volteé la lista de desplazamiento 180 grados y volví los divs dentro de la lista de desplazamiento 180 grados. Hice esto para que los mensajes siempre comiencen en la parte inferior sin necesidad de desplazarlo hacia abajo en la carga de la página, etc. La desventaja es que también se invierte la dirección de desplazamiento y aquí es donde necesito su ayuda.

Hice una pregunta similaraquí y alguien me proporcionó una respuesta de trabajo general (su respuesta también está en mi ejemplo jsfiddle) pero en mi caso no puedo hacerlo funcionar.

El siguiente código es una respuesta funcional de mi otra pregunta, pero no funciona en mi situación:
HTML:

<div ng-app="scrollApp">
    <scrollbox> <!-- my directive -->
        Content to be scrolled
    </scrollbox>
</div>

javascript:

var app = angular.module('scrollApp', []);

app.directive('scrollbox', function($window) {

    angular.element($window).bind('mousewheel', function(event) {        

        event.preventDefault(); // cancel the default scroll

        var currentPosition = $window.pageYOffset;
        var delta = event.wheelDelta;                         
        window.scrollTo(0, currentPosition + delta);
    }); 

    return {};
});

Respuestas a la pregunta(1)

Su respuesta a la pregunta