反转滚动旋转(180d)

Invert scroll on rotate(180d)

本文关键字：180d 旋转 滚动      更新时间：2023-09-26

有个小问题。(参考小提琴)在我的项目中，我有一个容器，它已经旋转了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);
}

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

编辑:您的原始设置在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 Fiddle Demo

您可以使用mousewheel库来捕获和反转滚动。

$(".class1").mousewheel(function(event) {
  event.preventDefault();
  this.scrollTop -= (event.deltaY * event.deltaFactor * -1);
});

您可以在这里查看演示:http://jsfiddle.net/fduu20df/1/

相关文章：