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

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>',
                '<ul class="ion_index_sidebar">',
                '   <li ng-click="indexScrollGoToList(\'index_{{modelName}}_{{scrollIndex}}\')" ng-repeat="scrollIndex in sidebarScrollIndex">{{scrollIndex}}</li>',

You might be looking for

Whether to allow scrolling to bounce past the edges of the content. Defaults to true on iOS, false on Android.


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.

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

1 Like

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.

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