How to disable content scrolling?

ionic-v1
1

Hi,

I want to include a static height / width google map element inside my tab <content> area but I don’t want to enable a rubber-band effect or show scroll bars. How do I go about this?

I tried overriding .scroll css rule with width: 100% and height:100%. This worked but definitely isn’t a good practice.

How about a content attribute that disables rubber-band scrolling, and another supporting facilitating full-width / full-height content?

Nick

3 Likes
2

Hey @credli, did you try setting <content scroll="false">? That will disable scrolling. Take a look at the examples/starters/map for a full screen map example.

21 Likes
3

Works like a charm. Thanks Max.

4

Hey there, is there a way to dynamically turn scrolling “on” and “off”?

2 Likes
5

There’s not a built-in mechanism for this. Teh “scroll” attribute is not watched. So, if it changes, the content does not observe it.

See example that this does not work : http://codepen.io/calendee/pen/Lhwpc

6

Any updates on this topic ?

7

Any update on this? Would be a great feature to disable/enable scrollbar programatically. IScroll5 allows this.

8

Here’s an idea for a hack: add a transparent overlays and capture all interaction events. Allow click throughs and whatever other events you need to, but disable vertical drags.

9

I’d also need this…
I am building a directive where an element is only allowed to be dragged horizontally. However, a vertical drag results in unwanted scrolling of the ion-content page.
There should be a better solution than @peey’s hack.

11

Hey buddy, I back you up on this feature request.

flies_away

12

This is a dirty and terrible hack. It’s laggy and buggy but maybe helps someone. The idea is to detect the vertical scrolling position and scroll the element to that same position, when horizontal drag is detected on an element.

So, this example would disable vertical scrolling, when .horizontally-swiped-element notices horizontal dragging. Here is the HTML stuff…

<div class="horizontally-swiped-element" on-drag-left="disableVerticalScrolling()" on-drag-right="disableVerticalScrolling()">

…and here is the function to disable vertical scrolling, called from the HTML when on-drag-left and on-drag-right are triggered. This can be placed in the controller. And yeah, you can make it directive if you want.

$scope.disableVerticalScrolling = function() {
    var scrollPos = $ionicScrollDelegate.getScrollPosition().top;
    $ionicScrollDelegate.scrollTo(0, scrollPos, false);
}

Any ideas how to improve this workaround’s performance are welcome. Anyway, disabling scrolling shouldn’t happen by scrolling, and it’s what this hack is all about.

I guess that many of us would like to create mobile-Netflix-like UI with horizontally scrolled and dragged elements, so let’s hope someone skillful enough implements the goal of these workarounds as a feature, the way this should be done.

2 Likes
13

I’m doing a prototype and was in need of a quick fix, so I’ve got an even bigger hack:

  1. Set window.disableScrolling to true/false when applicable

  2. Add the following early return to the __publish function in ionic.bundle.js:

    __publish: function(left, top, zoom, animate, wasResize) {
    // GIANT HACK:
    if (window.disableScrolling) return;

I’ve barely tested this, but it seems to do the trick for me. I wouldn’t do this in production, so be very very careful when using it.

2 Likes
14

We used this as a quick fix:

$ionicScrollDelegate.getScrollView().__enableScrollY = false

Do this every time an event is called, in our case, on every drag event.

6 Likes
15

This is really great giant huge hack. Thank you sapanda.

1 Like
16

In my testing the following disables scrolling (both scrollingY and scrollingX are possible) until it is explicitly re-enabled, i.e. you only have to call it once onTouch and then re-enable onRelease.

Disable scrolling:

$ionicScrollDelegate.getScrollView().options.scrollingY = false;

Enable scrolling:

$ionicScrollDelegate.getScrollView().options.scrollingY = true;
4 Likes
17

A feature like this would be really nice – without hacking…

1 Like
18

Tried using ion-pane instead of ion-content?

1 Like
19

I Just read the docs and it seems that

$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);

or

$ionicScrollDelegate.freezeAllScrolls(true);

should do the trick.

Testing right now.

1 Like
20

I have tried several options with .freezeScroll(true) on a Directive and Controllers and never got it working correctly. However this option works directly out of the box!! :smile:

$ionicScrollDelegate.$getByHandle(‘mainScroll’).getScrollView().options.scrollingY = false;

2 Likes
21

My usecase for this was having a signature pad and preventing scroll while signing. If scrolling was enabled, the signature functionality was basically unusable.

Anyway, $ionicScrollDelegate.freezeAllScrolls(true/false); worked for me.