How to disable content scrolling?

this is the only option that worked for me as well.
$ionicScrollDelegate.$getByHandle(‘mainScroll’).getScrollView().options.scrollingY = false;

I was getting undefined errors, apparently there’s no .freeze… methods on $ionicScrollDelegate:

image

Excellent, this works for me.

is it possible to scroll only ng-repeat section - but not the whole view?

2 Likes

Something like this? http://codepen.io/pliablepixels/pen/RWoPOo

Oh yes definitely works like a charm!

Hey max i have all so a problem with scroll bar its automatically always visible even if i create a blank project it used be always without a scroll bar but recently the scroll bar is always visible

This is just in the browser. When running on a real device you won’t have any problem.

You can use $ionicScrollDelegate.freezeAllScrolls(true);

It doesn’t work straight off the bat - you need to wrap it in a $timeout - although I don’t like using timeouts if I can help it so there may may be a better way to do it than this.

This worked for me:

$timeout(function(){
$ionicScrollDelegate.freezeAllScrolls(true);
});

Hope this helps :smile:

my problem is that I want to stop active scrolling on the Formular content.
<ion-content delegate-handle="formularContent" overflow-scroll="true">

$ionicScrollDelegate.$getByHandle(‘formularContent’).freezeAllScrolls(true);
$ionicScrollDelegate.$getByHandle(‘formularContent’).freezeScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$ionicScrollDelegate.$getByHandle(‘formularContent’).getScrollView().options.scrollingY = false;

but the scrolling isn’t stop.

Cordova CLI: 5.4.1
Ionic Version: 1.2.4-nightly-2053
Ionic CLI Version: 1.7.13
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.3
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v4.2.6
Xcode version: Xcode 7.2 Build version 7C68

Hi, i have the same issue here.
Just wrap your call in one $timeout, like:

$timeout(function(){
  $ionicScrollDelegate.$getByHandle('formularContent').freezeScroll(true);
})

Just add

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

to your css or scss file to get rid of the scroll bars while testing in the browser :slightly_smiling:

Hi, sry for the late answer and thanks for help but the active scroll doesn’t stop in iOS.
i think the native scroll is the problem?!

$timeout(function(){
  $ionicScrollDelegate.$getByHandle('formularContent').freezeScroll(true);
})

This worked for me:

$ionicScrollDelegate.$getByHandle(‘scroll-area’).getScrollView().freezeShut(true);

Version 1.7.14

Cheers!

this.$ionicScrollDelegate.freezeAllScrolls(true);

Hello, i can disabled making this:

ion-content .scroll-content{
  overflow-y: hidden;
}

Hope this help you!

3 Likes

Thank you so much, I detected it is okay…
HTML
<ion-content delegate-handle="mainScroll"
JS
//PREVENT SCROLL
$scope.disableVerticalScrolling = function () {
$ionicScrollDelegate.$getByHandle(‘mainScroll’).freezeScroll(true);
}
$scope.enableVerticalScrolling = function () {
$ionicScrollDelegate.$getByHandle(‘mainScroll’).freezeScroll(false);
}

use ngZone. and just put the variable inside the ngZone.run and it will work like charm

It’s working perfectly!!! Thank you so much!!!

I have found that if you have <ion-content overflow-scroll='true'> set then using $ionicScrollDelegate.freezeAllScrolls(true/false) does not work. I need both on the same view/template and am trying to find a way to set overflow via $ionicScrollDelegate so I can removed the ion-content reference.

overflow-scroll='true' is not a part of the JS environment and its overriding any JS controls.

OLD…but I found that overflow-scroll='true' defined in in your <ion-content> overrides any JS scroll control. I needed the overflow-scroll for a scrolling div inside of the scrolling page - but then that overrode an $ionicScrollDelegate.freezeAllScrolls(true) when I needed a scanner view to not scroll.

Now I am trying to find a way to programatically do the 'overflow-scroll` OR create another div scroll method…no luck so far.