Nested scrollable (horizontal in vertical) problem on android device(chrome or any)

[honeyl3oom]

I have template included nested scrollable (horizontal(child) in vertical(parent) (code below)). Problem is that when I (touch) scroll vertically on horizontal scrollable zone, parent scrollable don't be scrolled. ( I want parent scrollable to be scrolled vertically in this case) On horizontal scrollable zone, only horizontal (touch)scrolling works. ( android device 4.4.2 - chrome or any browser, it works in PC or iPhone )

After debugging, I found that overthrow state is inactive in android device. So I modify part of overthrow in mobile-angular-ui.js code.

  var doc.., // line 1505 [mobile-angular-ui.js]
    nativeOverflow = ~~;
  nativeOverflow = false; // I add this temporarily. this cause init overthrow.support to "none", not "native"

and then works.

Is this overthrow bug? (my android 4.4.2 and chrome lately)

Is there other problem when I force init overthrow.support to "none" ?

Example code

SCSS

@import 'lib/mobile-angular-ui-base';
.top-content {
  height:300px;
}
.horizontal-content {
  height:150px;
  position:relative;
  .scrollable {
     height:150px;
  }
  .scrollable-content {
     white-space:nowrap;
     .image {
        display:inline-block;
        width:200px;
        margin-right:5px;
        height:100%;
        background-color:green;
     }
  }
}
.bottom-content {
  height:500px;
}

HTML

<div class="app">
  <div class="app-body">
    <div class="app-content">
      <div class="scrollable">
         <div class="scrollable-content main">
            <div class="top-content">
            </div>
            <div class="horizontal-content">
              <div class="scrollable">
                <div class="scrollable-content">
                    <div class="image" ng-repeat="i in [1,2,3,4,5]"></div>
                </div>
              </div>
            </div>
            <div class="bottom-content">
            </div>
         </div>
      </div>
    </div>
  </div>
</div>

P.S Sorry for my english T^T

[honeyl3oom]

If forcing nativeOverflow to be false in android, browser scrolling is stiff. :(

[lernrr777]

I am also facing the same problem. I made an Hybrid Application( For Android) with mobile Angular UI demo. All the features are working well except vertical scrolling. Any solution.

[mcasimir]

@lernrr777 what does it means that vertical scroll does not work. Is it related to nested scroll area, or even plain scroll area?

@honeyl3oom Yours is a tricky case, i don't think overthrow was intended to address it. Anyway we can discuss the proper behaviour and try to fix it in MAUI, or submit a PR to Overthrow.js

Regarding this i need you to answer some questions: does the same happens on IOS?