about using the CSS3 property: Transform fixed menu position, menu flicker jitter when sliding pages

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.