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