旋轉反轉滾動（180d）

Question

有一個小問題。 （請參閱小提琴）我的項目中有一個已旋轉180度的容器，其中的一個容器又旋轉了180度回到原始狀態。

我需要反轉滾動。 我將如何處理？

不要介意浪費時間來恢復基本設置。 基本設置必須保留。

http://jsfiddle.net/vavxy36s/

小提琴的描述：“開始”標記初始字符串，“結束”標記最后一個字符串。 如果嘗試滾動，您會發現，它在正常滾動方式上是相反的。

.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

編輯：您的原始設置在Chrome和[IE＆Firefox]中具有不同的行為。 在Chrome中，滾動已經反轉，但在FF和IE中，滾動保持正常。 我的解決方案在兩種情況下都將其還原，但是行為在瀏覽器之間仍然不同。

您可以添加以下樣式：

/* ...
   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小提琴演示

Answer 2

您可以使用鼠標滾輪庫捕獲並反轉滾動運動。

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

  event.preventDefault();

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

});

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