javascript - side menu scroll lags on safari (ios) -


i have mobile website has simple side menu bar scroll, when scrolling menu on safari lags lot (struggle scroll).

here html:

<body>     <div id="menu_background" onclick="togglemenu()"></div>     <div id="menu">         <ul>         <li>         <div>item 1</div>         </li>             //other items goes here     </ul>     </div>     <div id="global_container">         //some content goes here     </div> </body> 

here css:

#menu {      position: absolute;     top: 0px;     bottom: 0px;     z-index: 100;     overflow: hidden;     display:none;     width: 0%;     padding: 1%;  } 

and javascript :

var menushown = false; function togglemenu(){     var menu = document.getelementbyid("menu");     var menubackground = document.getelementbyid("menu_background");     var globalcontainer = document.getelementbyid("global_container");     if(!menushown){         menushown = true;         menubackground.style.visibility = "visible" ;         menu.style.width="60%";         menu.style.display="block";         menu.style.overflowy="auto";         globalcontainer.style.position="fixed";         globalcontainer.style.right="62%";       }     else{         menushown = false;         menubackground.style.visibility = "hidden" ;         menu.style.width="0%";         menu.style.display="none";         menu.style.overflowy="hidden";         globalcontainer.style.position="static";     } } 

i didn't include rest of html there menu button onclick action trigger togglemenu() javascript function.

also don't want use ready made jquery plugins or other solutions.

any suggestions ?

solved using following in css:

rather using following in css #menu selector

overflow: hidden; 

use instead

overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; 

Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -