Disable Content Scroll dynamically

ionic-v1
1

Hello,

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,

2

nobody has a solution or a fix ? thanks

3

css pointer events :wink:

2 Likes
4

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.

5

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

6

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

7

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%;
background-color:rgba(255,0,0,0.0);
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%;
background-color:rgba(255,0,0,0.0);
color: white;
font-size: 20px;
}

.scroll-background{
background-size: cover !important;
overflow: hidden;
}

8

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

it works only for collection-repeat

9

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>