码迷,mamicode.com
首页 > Web开发 > 详细

关于使用css3属性:transform固定菜单位置,在滑动页面时菜单闪现抖动的问题

时间:2018-05-29 20:33:04      阅读:601      评论:0      收藏:0      [点我收藏+]

标签:first   tab   eve   col   滚动   osi   fir   rap   load   

 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,能解决该问题。

 

关于使用css3属性:transform固定菜单位置,在滑动页面时菜单闪现抖动的问题

标签:first   tab   eve   col   滚动   osi   fir   rap   load   

原文地址:https://www.cnblogs.com/front-end-develop/p/9107549.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!