關於使用css3屬性：transform固定菜單位置，在滑動頁面時菜單閃現抖動的問題

 1 myScroll = new IScroll('#h-s-wrapper', {
 2         scrollX: true,
 3         scrollY: true,
 4         probeType: 3,
 5         mouseWheel: true,
 6         bounce: false,        //鎖定邊界，不容許拖拽
 7         //click: true
 8         //preventDefault: false,
 9         preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }
10     });
11     myScroll.on('scroll', updatePosition);
12     myScroll.on('scrollEnd', loadNewData);

 1 function updatePosition() {
 2     /// <summary>設置鎖定表頭、列</summary>
 3     var iTop = this.y;
 4     var iLeft = this.x;
 5     //上下滑動，當iTop爲負值時，代表容器的頂邊在Y軸上0位置上邊
 6     if (iTop < 0) {
 7         //$('#h-s-content table thead tr').css('transform', 'translate(0px, ' + Math.abs(iTop) + 'px)');//使用translate，在上下滑動頁面時，固定的菜單會出現抖動現象
 8         $('#h-s-content table thead tr').css('transform', 'translate3d(0px, ' + Math.abs(iTop) + 'px,0px)');
 9 
10     } else {
11         //此處設置爲0，由於存在慣性滑動，向下滑動時會致使容器的座標會越過Y軸的0座標，變成正值，會形成設置thead表頭的座標向下偏移
12         $('#h-s-content table thead tr').css('transform', 'translate3d(0px, 0px, 0px)');
13     }
14     //左右滑動；當iLeft爲負值時，代表容器的左側邊在X軸上0位置的左側
15     if (iLeft < 0) {
16         $('#h-s-content table tr th:first-child, td:first-child').css('transform', 'translate3d(' + Math.abs(iLeft) + 'px, 0px,0px)');
17     } else {
18         $('#h-s-content table tr th:first-child, td:first-child').css('transform', 'translate3d(0px, 0px, 0px)');
19     }
20 }

 

 

解決辦法：使用transform方式固定菜單、表頭，在上下滾動頁面時菜單會出現抖動現象，將translate改爲translate3d，能解決該問題。