javascript - 旋转时反转滚动(180d)

Question

遇到一个小问题。 (引用 fiddle ) 我的元素中有一个容器已旋转 180 度，内部的容器又旋转了 180 度回到原始状态。

我需要反转滚动。 我该怎么办？

不要介意用恢复基本设置的方法浪费时间。 基本设置必须保留。

http://jsfiddle.net/vavxy36s/

fiddle 说明: “Start”标记第一个字符串，“end”当然标记最后一个字符串。 如果您尝试滚动，您会发现它与通常滚动的方式相反。

.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);
}

编辑:只是鼠标滚轮滚动，必须反转。

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.

您可以添加这些样式:

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

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

然后，使用 jQuery 修改 .class2 的 bottom CSS 属性:

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