Disable Content Scroll dynamically


I’m looking for the best way to block and disable the (vertical) scroll in the ionic-content, dynamically.

I know it’s possible to do that by adding but I’m looking for a dynamical way to disable/enable the scroll in javascript without refresh the page.

Thanks for you help,

nobody has a solution or a fix ? thanks

css pointer events :wink:


thanks for your help, nice trick.
But the problem is that I have a div (with absolute positioning) in front of my ionic-content, and I need pointer events on this div, so the scroll is still enable.

Any chance you could put together a simple codepen of what you have so far?

i have a map inside ion-content,i am not able to scroll map if i do so,it also disables clicks.

Hi @mhartington I think this is the place I can get my answers! I have list horizontally scrolling but want to stop vertical scsolling. An help is much appreiciated

{{ plan.title }}

// CSS

/* Global Overrides /
.scroll-bar-indicator{ display: none; }
Platform Ios */

/* Home Tab */
.platform-ios .home .item-button{
height: 200px;
float: left;
width: 33.33%;
margin-top: 25%;
margin-bottom: 25%;

.platform-ios .home .item-button .item-content{
height: 100%;
color: white;
font-size: 48px;

/* Plan, Owner, About Tabs */
.plan {
width: auto;
height: 10px;
white-space: nowrap;

.plan .plan-ios {
width: 300px;
height: 300px;
margin-top: 20%;
display: inline-block;
position: relative !important;

.plan .item-button .item-content{
height: 100%;
color: white;
font-size: 20px;

background-size: cover !important;
overflow: hidden;

hey guys, i have tried the $ionicScrollDelegate.getScrollView().options.scrollingY=false;

it works only for collection-repeat

Why don’t you try to put it inside an <ion-scroll> element?

Then you can set the attribute like <ion-scroll direction="x">LIST IN HERE</ion-scroll>