title: Vertical Scrolling Not Working for Mobile - Touch
body: <p>I'm having an issue getting an div to allow mobile device to touch and vertical scroll. Scrolling works fine if you scroll your mouse wheel or use arrow keys. Just not touch. This has been tested on all device and in emulation.Please for the love of god help me lol it's been 3 days no luck. And I've done this in the past with no issues, I think I've gone full idiot, hahaha.</p>
  
  <p>Below is an image of the scroll-able area, the colored borders yellow/black are to help you determine whats going on. This is for tablets and smaller.</p>
  
  <p><a href="https://cdn.discordapp.com/attachments/103696749012467712/491964310436970499/1.PNG" rel="nofollow noreferrer">https://cdn.discordapp.com/attachments/103696749012467712/491964310436970499/1.PNG</a></p>
  
  <pre><code>export const CategoriesBox = styled.div`
    margin-top: 6px;
    position: relative;
    width: 100%;
    height: 310px;
    overflow-y: scroll;
  
    @media only screen and (max-width: ${breakpoints.tablet}) {
      border: 1px solid yellow;
      height: 310px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }
  
    &amp; input[type="checkbox"] {
      display: none;
      pointer-events: none;
    }
  
    &amp; label {
      margin: 0;
      padding-left: 21px;
    }
  `;
  
  export const ScrollableBox = styled.div`
    position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid black;
  `;
  </code></pre>
  
  <p>I removed the webkit stuff and tried a few things some friends shown me. Below is the new styled component code. The ref image is still the same. Again, I can scroll it fine using scroll wheel or up/down arrows.</p>
  
  <pre><code>export const CategoriesBox = styled.div`
    margin-top: 6px;
    position: relative;
    width: 100%;
    height: 310px;
    overflow-y: scroll;
  
    @media only screen and (max-width: ${breakpoints.tablet}) {
      border: 1px solid yellow;
      height: 310px;
      z-index: 1;
      overflow-y: scroll;
    }
  
    &amp; input[type="checkbox"] {
      display: none;
      pointer-events: none;
    }
  
    &amp; label {
      margin: 0;
      padding-left: 21px;
    }
  `;
  
  export const ScrollableBox = styled.div`
    position: relative;
    width: 100%;
    height: fit-content;
    border: 1.5px solid red;
  `;
  </code></pre>