Is iOS breaking the scroll if momentum

by Admiral Potato

HTML

<div><button id="button">OKAY</button></div><br /><br />
<div id="TAGGLE">
<div class="KittenPicker" data-reactid=".4.1"><div class="SlideSelectHolder" data-reactid=".4.1.0"><div class="SlideSelect nativeScroll momentumScroll" data-reactid=".4.1.0.0"><ul class="slideList" style="width: 1328px;" data-reactid=".4.1.0.0.0"><li style="width: 166px;" data-reactid=".4.1.0.0.0.$slide-0"><a class="kittenProduct" data-reactid=".4.1.0.0.0.$slide-0.$kp-0"><img src="http://farm9.staticflickr.com/8172/8043720291_6fe3ee845a_q.jpg" data-reactid=".4.1.0.0.0.$slide-0.$kp-0.0"><span data-reactid=".4.1.0.0.0.$slide-0.$kp-0.1">Rainbow Kitten</span></a></li><li style="width: 166px;" data-reactid=".4.1.0.0.0.$slide-1"><a class="kittenProduct" data-reactid=".4.1.0.0.0.$slide-1.$kp-1"><img src="http://farm4.staticflickr.com/3918/14825637417_0cb297db8e_q.jpg" data-reactid=".4.1.0.0.0.$slide-1.$kp-1.0"><span data-reactid=".4.1.0.0.0.$slide-1.$kp-1.1">Dreamer Kitten</span></a></li><li style="width: 166px;" data-reactid=".4.1.0.0.0.$slide-2"><a class="kittenProduct" data-reactid=".4.1.0.0.0.$slide-2.$kp-2"><img src="http://farm4.staticflickr.com/3666/9035469865_e06590d86e_q.jpg" data-reactid=".4.1.0.0.0.$slide-2.$kp-2.0"><span data-reactid=".4.1.0.0.0.$slide-2.$kp-2.1">Organic Grass-fed Kitten</span></a></li><li style="width: 166px;" data-reactid=".4.1.0.0.0.$slide-3"><a class="kittenProduct" data-reactid=".4.1.0.0.0.$slide-3.$kp-3"><img src="http://farm6.staticflickr.com/5078/14133914169_f90b11ce8e_q.jpg" data-reactid=".4.1.0.0.0.$slide-3.$kp-3.0"><span data-reactid=".4.1.0.0.0.$slide-3.$kp-3.1">Towel Kitten</span></a></li><li style="width: 166px;" data-reactid=".4.1.0.0.0.$slide-4"><a class="kittenProduct" data-reactid=".4.1.0.0.0.$slide-4.$kp-4"><img src="http://farm3.staticflickr.com/2225/3528540033_79a235a876_q.jpg" data-reactid=".4.1.0.0.0.$slide-4.$kp-4.0"><span data-reactid=".4.1.0.0.0.$slide-4.$kp-4.1">Turquoise Kitten</span></a></li><li style="width: 166px;"...

CSS

<style type='text/css'>
/* your custom CSS \*/
</style>
<!-- access to the HEAD element -->
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<style>
.SlideSelectHolder {
  position: relative;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden; }
  .SlideSelectHolder * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: block; }
  .SlideSelectHolder .SlideSelect {
    position: relative;
    display: block;
    overflow: hidden; }
    .SlideSelectHolder .SlideSelect > ul.slideList {
      position: relative;
      overflow: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0); }
      .SlideSelectHolder .SlideSelect > ul.slideList > li {
        display: block;
        float: left; }
        .SlideSelectHolder .SlideSelect > ul.slideList > li > a {
          display: block;
          cursor: pointer;
          text-decoration: none; }
          .SlideSelectHolder .SlideSelect > ul.slideList > li > a > img {
            width: 100%; }
          .SlideSelectHolder .SlideSelect > ul.slideList > li > a > span {
            display: block;
            padding: 0.5rem 0 0 0; }
    .SlideSelectHolder .SlideSelect.nativeScroll {
      overflow-x: scroll; }
    .SlideSelectHolder .SlideSelect.momentumScroll {
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch; }
  .SlideSelectHolder ul.dotList {
    display: block;
    font-size: 0;
    width: 100%;
    list-style-type: none; }
    .SlideSelectHolder ul.dotList > li {
      display: inline-block; }
      .SlideSelectHolder ul.dotList > li > a {
        -webkit-transition: all 125ms;
        -moz-transition: all 125ms;
        -ms-transition: all 125ms;
        transition: all 125ms;
        position: relative;
        display: block;
        padding: 1rem;
        cursor: pointer;
        text-decoration: none;
        opacity: 0.5; }
        .SlideSelectHolder ul.dotList > li > a > span {
         ...

Babel + JSX

var boop = document.getElementById('button');
var holder = document.getElementById('TAGGLE');
var toggleState = true;
var boopHandler = () => {
    toggleState = !toggleState;
	holder.className = !toggleState ? 'nope' : '';
};

boop.addEventListener('click', boopHandler);