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

**URL:** <https://forum.ionicframework.com/t/possible-to-stop-bouncing-of-scroll-list-by-an-html-element/32912>\
**Category:** ionic-v1\
**Created:** [September 22, 2015, 4:03am UTC](https://forum.ionicframework.com/t/possible-to-stop-bouncing-of-scroll-list-by-an-html-element/32912 "2015-09-22T04:03:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ionicube](https://avatars.discourse-cdn.com/v4/letter/i/9f8e36/32.png) [@ionicube](https://forum.ionicframework.com/u/ionicube)\
**Post date:** [September 22, 2015, 4:03am UTC](https://forum.ionicframework.com/t/possible-to-stop-bouncing-of-scroll-list-by-an-html-element/32912/1 "2015-09-22T04:03:58Z")

</div>

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(''));
```

---

<div class="post-metadata">

**Author:** ![fox](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fox/32/91278_2.png) [@fox](https://forum.ionicframework.com/u/fox)\
**Post date:** [September 22, 2015, 9:39am UTC](https://forum.ionicframework.com/t/possible-to-stop-bouncing-of-scroll-list-by-an-html-element/32912/2 "2015-09-22T09:39:04Z")

</div>

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/](http://ionicframework.com/docs/api/directive/ionContent/)

---

<div class="post-metadata">

**Author:** ![ionicube](https://avatars.discourse-cdn.com/v4/letter/i/9f8e36/32.png) [@ionicube](https://forum.ionicframework.com/u/ionicube)\
**Post date:** [September 22, 2015, 11:58am UTC](https://forum.ionicframework.com/t/possible-to-stop-bouncing-of-scroll-list-by-an-html-element/32912/3 "2015-09-22T11:58:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fox](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fox/32/91278_2.png) [@fox](https://forum.ionicframework.com/u/fox)\
**Post date:** [September 22, 2015, 12:11pm UTC](https://forum.ionicframework.com/t/possible-to-stop-bouncing-of-scroll-list-by-an-html-element/32912/4 "2015-09-22T12:11:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ionicube](https://avatars.discourse-cdn.com/v4/letter/i/9f8e36/32.png) [@ionicube](https://forum.ionicframework.com/u/ionicube)\
**Post date:** [September 22, 2015, 1:02pm UTC](https://forum.ionicframework.com/t/possible-to-stop-bouncing-of-scroll-list-by-an-html-element/32912/5 "2015-09-22T13:02:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ionicube](https://avatars.discourse-cdn.com/v4/letter/i/9f8e36/32.png) [@ionicube](https://forum.ionicframework.com/u/ionicube)\
**Post date:** [September 26, 2015, 7:18am UTC](https://forum.ionicframework.com/t/possible-to-stop-bouncing-of-scroll-list-by-an-html-element/32912/6 "2015-09-26T07:18:42Z")

</div>

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