javascript - how can i set starting position of a tabs in swipe Tabs for removing there scroll? -


i make phonegap app using swipe tabs have 4 tabs , every tab have specific div getting dynamic data using ajax. tabs work fine. there have problem in scroll bar. suppose have in first tab page ajax call , data url. suppose 100 data url seeing last data use scroll page. problem here @ time swipe first tab second tab second tab use scroll of first tab page , show in last of page. don't know can explain add snapshot of problem. 1 please me. thanks. have no reputation post images add code swipe.

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 use reference of swipe tabs link tabs feedback demo

here 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: */     } 

css

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

working woth demo on site enter image description here


Comments

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -