Possible to stop bouncing of scroll list by an HTML element?


#1

Adding the has-bouncing attribute to ion-scroll stops the bouncing on a scroll list as expected. But I have a contacts-like sidebar over the side of the list which can drag and bounce the entire scroll list along with the sidebar. Since this is a ul element, what can be added to fix the sidebar while allowing the scroll list to bounce, if possible, or to disable bouncing altogether?

The code looks like:

var template = angular.element([
                '<ion-list class="ion_index_list_outer">',
                '<ion-scroll delegate-handle="indexScroll" has-bouncing="false">',
                '<div data-ng-repeat="items in sortedItems" class="ion_index_list">',
                '<ion-item class="item item-divider" id="index_{{modelName}}_{{items[0].dividerHeader}}">{{items[0].dividerHeader}}</ion-item>',
                '<ion-item ng-repeat="item in items"></ion-item>',
                '</div>',
                '</ion-scroll>',
                '<ul class="ion_index_sidebar">',
                '   <li ng-click="indexScrollGoToList(\'index_{{modelName}}_{{scrollIndex}}\')" ng-repeat="scrollIndex in sidebarScrollIndex">{{scrollIndex}}</li>',
                '</ul>',
                '</ion-list>'
            ].join(''));

#2

You might be looking for

has-bouncing
(optional)
boolean
Whether to allow scrolling to bounce past the edges of the content. Defaults to true on iOS, false on Android.

http://ionicframework.com/docs/api/directive/ionContent/


#3

Thanks Fox, but the code already has the has-bouncing element set to false on the ion-scroll element, and it works if one of the ion-items are dragged, but gets ignored if the ul element is held and dragged. Both the ion-scroll and ul are contained in the ion-list tag. It would be ideal if it were possible to add a has-bouncing attribute to the ion-list and/or the ul elements to fix the problem.


#4

I’ve seen overflow-scroll mentioned a few times - not entirely sure of what that impacts though.


#5

I’ve seen some posts mention this:

html, body {
height: 100% !important;
overflow: hidden !important;
position: fixed !important;
}

but it does not seem to be working in my scss file.

The problem is only on IOS–Android is not dragging/bouncing the ul. Thanks for the feedback.


#6

Fox, adding overflow-scroll=“true” on the correct ion-content element made the problem go away. Thanks for leading me in the right direction!