ionic
ionic copied to clipboard
Disable horizontal bounce
Hi there, thank you for your plugin! I'm finding it very useful for now, apart from the fact that ionSlideBox it's deprecated now.
The ion-slide-box have a bouncing effect on Chrome for Windows like the rest of the components, but on Android every scrollable item stops bouncing excepting the slide. This wouldn't be a big problem, but on my boss' iPad the bounce on that component is behaving crazy...
I'm not getting results with the property hasBounce. My view structure right now is the following (a little weird, but I found it the only way to make my structure and scrolls as I wanted with few CSS tweaks)
<ion-view view-title="Carta">
<tab-slide-box tab="0" class="carta">
<div class="tsb-icons" style="margin-top: 44px;">
<div class="tsb-ic-wrp">
<ion-scroll direction="x" class="tsb-hscroll scroll-view ionic-scroll" >
<div class="tabs">
<a class="tab-item active">Favoritos</a>
<a class="tab-item">Bocadillos</a>
<a class="tab-item">Hamburguesas</a>
<a class="tab-item">Bebidas</a>
<a class="tab-item">Cervezas</a>
<a class="tab-item">Cervezas</a>
<a class="tab-item">Cervezas</a>
<a class="tab-item">Cervezas</a>
<a class="tab-item">Cervezas</a>
</div>
</ion-scroll>
</div>
</div>
<ion-content style="margin-top: 68px;">
<ion-slide-box show-pager="false" on-slide-changed="updateTab($index)">
<ion-slide>
<ion-list>
<div class="row">
<ion-item ng-repeat="article in articles" href="#/playlists/{{playlist.id}}" class="categories-item col-25" on-hold="holdItem()">
<!-- {{playlist.title}} -->
<div class="card card--expand categories-card">
<div class="item item-divider categories-image" style="height: 200px; color: white;" ng-style="{'background': 'url(/img/categories/{{article.image}}) center / cover'}">
<div class="categories-text-overlay">
<h2 text-scroll>{{ article.name }}</h2>
<p>{{ article.subtitle }}</p>
</div>
</div>
</div>
</ion-item>
</div>
</ion-list>
</ion-slide>
<ion-slide><h1>Bocadillos</h1></ion-slide>
<ion-slide><h1>Hamburguesas</h1></ion-slide>
<ion-slide><h1>Bebidas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
</ion-slide-box>
</ion-content>
</tab-slide-box>
</ion-view>
I am also facing issue with horizontal bounce.May Anyone respond me to restrict that bouncing effect,
I would be really happy if someone could help me out with the exact same problem that @DevNIX also faced. Do anyone have a solution for restricting this bouncing effect?
Thank you!