1Myscroll =NewIscroll (' #h-s-wrapper ', {2SCROLLX:true,3Scrolly:true,4Probetype:3,5MouseWheel:true,6Bouncefalse,//lock boundary, do not allow dragging7 //click:true8 //Preventdefault:false,9Preventdefaultexception: {tagName:/^ (input| textarea| button| Select| A) $/ }Ten }); OneMyscroll.on (' scroll ', updateposition); AMyscroll.on (' Scrollend ', loadnewdata);
1 functionupdateposition () {2 ///<summary> Set lock header, column </summary>3 varITop = This. Y;4 varILeft = This. x;5 //swipe up and down, when Itop is negative, indicates that the top edge of the container is 0 positions above the y-axis6 if(ITop < 0) {7 //$ (' #h-s-content table thead tr '). css (' transform ', ' translate ' (0px, ' + math.abs (iTop) + ' px) ');//Use Translate, The fixed menu appears jittery when you swipe up and down the page8$ (' #h-s-content table thead tr '). css (' transform ', ' translate3d ' (0px, ' + math.abs (iTop) + ' px,0px) ');9 Ten}Else { One //This is set to 0 because of the inertia slip, which causes the container's coordinates to go over the 0 coordinates of the y-axis and becomes positive, causing the coordinates of the THEAD header to be shifted downward . A$ (' #h-s-content table thead tr '). css (' transform ', ' translate3d (0px, 0px, 0px) '); - } - //The left side of the container is left on the x-axis 0 position when the ILeft is negative the if(ILeft < 0) { -$ (' #h-s-content table tr th:first-child, Td:first-child '). CSS (' transform ', ' translate3d (' + math.abs (ileft) + ' px, 0px, 0px) '); -}Else { -$ (' #h-s-content table tr th:first-child, Td:first-child '). CSS (' transform ', ' translate3d (0px, 0px, 0px) '); + } -}
Workaround: Use Transform mode fixed menu, table header, scroll up and down the page menu will appear jitter phenomenon, will translate change to translate3d, can solve the problem.
about using the CSS3 property: Transform fixed menu position, menu flicker jitter when sliding pages