Ionic 3 scroll with active class and prev / next buttons

0

I'm developing my first App using Ionic 3 , in one of the pages, I have a form and in this form 2 vertical scrolls with the days and months of the year, select the date the service will be performed.

Asyoucanseeintheimageabove,wehaveasmallgreenselectorinthecenter,which"dictates" which month was selected, I created a div outside the scroll, with absolute position, always in the center, the question is, if I can add the active class in the month that is on the selector, and how can I make the prev and next buttons scroll the month by month ... when searching a lot of places I found similar jQuery functions, like the ScrollTop and ScrollOffset, but I did not succeed in applying them, I would like to know if we can do this in jQuery, or using Angular 5, if you can give me tips and examples I'll be grateful!

date.html

               <ion-col col-3 class="month-container" text-center>
                    <div class="alignment">
                        <button id="prev-month" ion-button icon-only clear>
                            <ion-icon class="fc-blue font-40 px-1" name="arrow-dropup-circle"></ion-icon>
                        </button>
                        <div class="selector bg-green"></div>
                        <ion-scroll id="dateMonth" scrollY="true" class="scroll-month">
                            <ion-list>
                                <ion-item id="{{item.id}}" class="bg-transparent border-none fc-white" *ngFor="let item of withdrawalMonthList" text-center>
                                    {{item.month}}
                                </ion-item>
                            </ion-list>
                        </ion-scroll>
                        <button id="next-month" ion-button icon-only clear>
                            <ion-icon class="fc-blue font-40 px-1" name="arrow-dropdown-circle"></ion-icon>
                        </button>
                    </div>
                </ion-col>
    
asked by anonymous 02.01.2019 / 19:50

0 answers