How can I set the start position of the tabs in the Tabs to remove the scroll there?

I am making a phonegap app to use swipe tabs. I have four tabs and each tab has a dedicated div that receives dynamic data using Ajax. the tabs just work fine. but the problem is in the scrollbar. suppose I have first bookmark, then Ajax call and get data from url. let's say it is now getting 100 data from the url to see the latest data I am using while scrolling down the page. The problem is here now that I was scrolling the first tab to the second tab and then the second tab was using the scrolling of the first page of the tab which is also displayed on the last page. I don't know if I can explain this, so I am adding some snapshot of this problem. Anyone please help me. Thank you. I have no reputation for posting images,so i add my code to scroll.

My index.html


<div class="tabs"> <a href="#" class="active">Orders</a> <a href="#" >Quotes</a> <a href="#">Closing</a> <a href="#">Encompass</a></div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide-style">
                <div class="content-slide">
                    <ul id="order-list" style='padding:0px; margin-top:68px;'>

                    </ul>
                </div>
            </div>
            <div class="swiper-slide slide-style">
                <div class="content-slide">
                    <ul id="quote-list" style='padding:0px; margin-top:68px;'>

                    </ul>
                </div>
            </div>
            <div class="swiper-slide slide-style">
                <div class="content-slide">
                    <ul id="closing-list" style='padding:0px; margin-top:68px;'>

                    </ul>

                </div>
            </div>
            <div class="swiper-slide slide-style">
                <div class="content-slide">
                    <ul id="encompass-list" style='padding:0px; margin-top:68px;'>

                    </ul>
                </div>
            </div>
        </div>
    </div>

      

I am using swipe tab link link Tabs with feedback demo

here is my swipe css

.swiper-container {
margin:0 auto;
position:relative;
overflow:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden; 
backface-visibility:hidden;
/* Fix of Webkit flickering */
z-index:1;
}
.swiper-wrapper {
position:relative;
width:100%;
-webkit-transition-property:-webkit-transform, left, top;
-webkit-transition-duration:0s;
-webkit-transform:translate3d(0px,0,0);
-webkit-transition-timing-function:ease;
-moz-transition-property:-moz-transform, left, top;
-moz-transition-duration:0s;
-moz-transform:translate3d(0px,0,0);
-moz-transition-timing-function:ease;
-o-transition-property:-o-transform, left, top;
-o-transition-duration:0s;
-o-transform:translate3d(0px,0,0);
-o-transition-timing-function:ease;
-o-transform:translate(0px,0px);
-ms-transition-property:-ms-transform, left, top;
-ms-transition-duration:0s;
-ms-transform:translate3d(0px,0,0);
-ms-transition-timing-function:ease;
transition-property:transform, left, top;
transition-duration:0s;
transform:translate3d(0px,0,0);
transition-timing-function:ease;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
float: left;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
}

.swiper-container {

}
.swiper-slide {

width: 25%;

}
.swiper-slide-active {
/* Specific active slide styling: */
}
.swiper-slide-visible {
/* Specific visible slide styling: */   
}

.swiper-pagination-switch {
/* Stylize pagination button: */    
}
.swiper-active-switch {
/* Specific active button style: */ 
}
.swiper-visible-switch {
/* Specific visible button style: */    
}

      

+3


source to share


1 answer


CSS

.swiper-slide {
    overflow-y: auto;
}

      



Working woth demo on siteenter image description here

+4


source







All Articles