Invert scroll on rotate(180d)

Question

Having a small problem. (Refer to fiddle) I've got a container in my project that has been rotated 180 deg, with a container inside that has been rotated another 180 back to the original state.

I need to invert the scroll. How would i go about this?

Dont mind wasting your time with a method, that reverts the basic setup. The basic setup has to stay.

http://jsfiddle.net/vavxy36s/

Description of fiddle: "Start" marks the initial string and "end" ofcourse the last one. If you try scrolling you will realize, that it's inverted as to how one would normally scroll.

.class1 {
    height: 200px;
    background-color: blue;
    color: white;
    width: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
    direction: rtl;
    -webkit-transform: rotate(180deg);
}
.class2 {
    direction: ltr;
    -webkit-transform: rotate(180deg);
}

EDIT: Just mousewheel scroll, has to be inverted.

Answer 1

Edit: Your original setup has different behaviors in Chrome and in [IE & Firefox]. In Chrome, the scroll is already inverted, but in FF and IE, the scroll remains normal. My solution reverts it in both cases, but the behaviors remain different across browsers.

You could add these styles:

/* ...
   Your original styles
   ...
*/

.class1 {
    overflow: hidden;
    position: relative;
}
.class2 {
    position: absolute;
    bottom: 0;
}

And then, using jQuery, modify the bottom CSS property of .class2 :

var scrollPos = 0,
    diff      = $('.class2').height() - $('.class1').height();


$('.class1').on('mousewheel', function(e) {
    scrollPos = Math.min(
                         0,
                         Math.max(
                                  -diff,
                                  scrollPos + e.originalEvent.wheelDelta
                        )
                );

    $('.class2').css('bottom', scrollPos);
});

JS Fiddle Demo

Answer 2

You could use the mousewheel library to catch and invert the scroll movement.

$(".class1").mousewheel(function(event) {

  event.preventDefault();

  this.scrollTop -= (event.deltaY * event.deltaFactor * -1);

});

You can view a demo here: http://jsfiddle.net/fduu20df/1/