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; }
Comments
Post a Comment