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

Question

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

我需要反转卷轴。我该怎么做？

不要介意用一种方法浪费您的时间，该方法会恢复基本设置。必须保留基本设置。

http://jsfiddle.net/vavxy36s/

fiddle 的描述:“开始”标记初始字符串，“结束”当然是最后一个字符串。如果您尝试滚动，您会发现它与通常的滚动方式相反。

.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