title: CSS Mobile Menu smooth scroll temporary disabled when parent is fixed
body: <p>On mobile phones if you are on top of a scrollable container - <em>which resides inside a fixed container</em>- and by 'mistake' scroll UP instead of DOWN, <strong>the scroll is temporary disabled</strong>.  </p>
  
  <p>I think it's a consequence of bouncing effect which occurs when CSS property <code>-webkit-overflow-scrolling: touch;</code> is added to scrollable containers. The purpose of this CSS property is to enable smooth scroll on mobile browsers.</p>
  
  <p>I posted this question here because I wanted to share my solution to it, so others won't spend time figuring a solution. Unfortunately I haven't found a question which address this issue.</p>
  
  <p>Please take a look at the mobile menu below, and then read the solution posted below.</p>
  
  <p><a href="https://i.stack.imgur.com/MznhT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MznhT.jpg" alt="visual menu description"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ECUq4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ECUq4.jpg" alt="html code of menu"></a></p>
  
  <p>As you can see there are four fixed containers, each containing a scrollable div, in which resides a big list of links inside a <code>&lt;ul&gt;</code> parent.</p>
  
  <p><strong>Important note</strong> The code above contains only HTML structure + its correspondent CSS. The JS was not implied at all, so it's important to understand that this is not a JS issue.</p>