Problems changing pages with "-webkit-overflow-scrolling: touch"

I need help, I tell you, I'm making an application where I need to use "-webkit-overflow-scrolling: touch" in several views, the problem is this:

When I scroll and press the button to change the view to another page, first I scroll and then I have to press again to change the view.

Summing up that I do not let myself change the view while the scroll is working

I found this solution: Using '-webkit- overflow-scrolling: touch 'hides content while scrolling / dragging but I can not make it work.

Some idea of why it does that, I can not find the solution.

My HTML:

<div id="index"  style="display: block;">

        <div class="headerpage">
            <div class="header_left">

            </div>
            <div class="header_right">

            </div>
        </div>

        <div id="bodyindex" class="scroll">
            <ul>
                <li>
                    <div class="img_ad"></div>

                    <div class="info_ad">
                        <p>Apple Watch Negro<br>250€<spam> . Hace 2h a 1 km de ti</spam></p>
                    </div>
                </li>
                <li>
                    <div class="img_ad"></div>

                    <div class="info_ad">
                        <p>Iphone 6s plus Negro<br>550€<spam> . Hace 2h a 1 km de ti</spam></p>
                    </div>
                </li>
                <li>
                    <div class="img_ad"></div>

                    <div class="info_ad">
                        <p>Bmw M3 Azul<br>6000€<spam> . Hace 2h a 1 km de ti</spam></p>
                    </div>
                </li>
                <li>
                    <div class="img_ad"></div>

                    <div class="info_ad">
                        <p>Seat ibiza 97<br>2000€<spam> . Hace 2h a 1 km de ti</spam></p>
                    </div>
                </li>
                <li>
                    <div class="img_ad"></div>

                    <div class="info_ad">
                        <p>Casa en oleiros<br>250000€<spam> . Hace 2h a 1 km de ti</spam></p>
                    </div>
                </li>
            </ul>
        </div>

    </div>

My CSS:

.scroll{
    -webkit-overflow-scrolling: touch;
}
div#index{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }
div#index div#bodyindex{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding-top: 90px;
    padding-bottom: 50px;
    padding-right: 17px;
}
div#index div#bodyindex ul{
    -webkit-transform: translate3d(0,0,0);
}
div#index div#bodyindex ul li{
    list-style: none;
}

Thanks in advance. Greetings