旋转时反转滚动（180d）

Question

有个小问题。（参考fiddle）我的项目中有一个容器已经旋转了 180 度，里面有一个容器又旋转了 180 度回到原来的状态。

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

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

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，修改bottom CSS 属性 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

您可以使用鼠标滚轮库来捕获和反转滚动运动。

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

  event.preventDefault();

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

});

您可以在此处观看演示：http://jsfiddle.net/fduu20df/1/

旋转时反转滚动（180d）

Invert scroll on rotate(180d)

javascript

css

jquery

scroll

JS Fiddle Demo