title: Prevent whole page from shifting onclick while using horizontally scrollable checkboxes on mobile
body: <p><a href="https://jsfiddle.net/BrokenDots/La4x08m9/4/" rel="nofollow noreferrer">JS fiddle link</a></p>
  <p>I made a horizontally scrollable div using overflow: auto and whitespace: nowrap and put some custom styled checkboxes in it with inline display. The problem I have is that when i scroll to one of the checkboxes towards the end on mobile screens, the whole page shifts and moves out of view. How do I fix it?</p>
  <pre><code>&lt;html&gt;
    &lt;ul class=&quot;ks-cboxtags&quot; id=&quot;topic_sec_container&quot; style=&quot;display: block;&quot;&gt;
              &lt;li&gt;&lt;input name=&quot;topic_secondary&quot; type=&quot;checkbox&quot; value=&quot;Study Melbourne&quot; id=&quot;checkboxOne&quot; checked=&quot;&quot;&gt;&lt;label for=&quot;checkboxOne&quot;&gt;Study Melbourne&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input name=&quot;topic_secondary&quot; type=&quot;checkbox&quot; value=&quot;City of Melbourne&quot; id=&quot;checkboxTwo&quot;  checked=&quot;&quot;&gt;&lt;label for=&quot;checkboxTwo&quot;&gt;City of Melbourne&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input name=&quot;topic_secondary&quot; type=&quot;checkbox&quot; value=&quot;Cultural&quot; id=&quot;checkboxThree&quot;  checked=&quot;&quot;&gt;&lt;label for=&quot;checkboxThree&quot;&gt;Cultural&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input name=&quot;topic_secondary&quot; type=&quot;checkbox&quot; value=&quot;Professional development&quot; id=&quot;checkboxFour&quot; checked=&quot;&quot;&gt;&lt;label for=&quot;checkboxFour&quot;&gt;Professional development&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input name=&quot;topic_secondary&quot; type=&quot;checkbox&quot; value=&quot;Employment&quot; id=&quot;checkboxFive&quot;  checked=&quot;&quot;&gt;&lt;label for=&quot;checkboxFive&quot;&gt;Employment&lt;/label&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input name=&quot;topic_secondary&quot; type=&quot;checkbox&quot; value=&quot;Insider Guides&quot; id=&quot;checkboxSix&quot;  checked=&quot;&quot;&gt;&lt;label for=&quot;checkboxSix&quot;&gt;Click this&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/html&gt;
  
  &lt;style&gt;
  /* custom checkboxes */
  ul.ks-cboxtags {
      list-style: none;
      padding: 0;
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      
      margin: 16px 0 0 0;
  }
  
  
  
  /* .ks-cboxtags::-webkit-scrollbar {
      display: none;
  } */
  
  ul.ks-cboxtags li{
      display: inline;
  }
  ul.ks-cboxtags li label{
      display: inline-block;
      background-color: none;
      color: var(--blue);
      border: 2px solid blue;
      border-radius: 100px;
      white-space: nowrap;
      margin: 0px 3px;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: all .2s;
  }
  
  ul.ks-cboxtags li label {
      /* padding: 8px 12px; */
      font-size: 18px;
      padding: 9px 16px;
      cursor: pointer;
  }
  
  
  
  ul.ks-cboxtags li input[type=&quot;checkbox&quot;]:checked + label::before {
      
      transform: rotate(-360deg);
      transition: transform .3s ease-in-out;
  }
  
  ul.ks-cboxtags li input[type=&quot;checkbox&quot;]:checked + label {
      border: 2px solid blue;
      background-color: blue;
      color: white;
      transition: all .2s;
  }
  
  ul.ks-cboxtags li input[type=&quot;checkbox&quot;] {
  display: absolute;
  }
  ul.ks-cboxtags li input[type=&quot;checkbox&quot;] {
  position: absolute;
  opacity: 0;
  }
  &lt;/style&gt;
  </code></pre>