Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Kellen_R_
Beginner
89 Views

How to prevent overscroll bounce for Sidebar in App Framework 2.1?

I can't seem to track this down and need to prevent the overscroll bounce behavior.  When the Sidebar is expanded and a touch-scroll or touch-drag event occurs the sidebar tugs down away from its anchored position.  I've tried overriding this behavior in the HTML, CSS, and JavaScript to no success. 

How can I prevent this behavior? 

 

(See animated screenshot attached)

App Framework 2.1

Intel XDK v.2366

 

Tags (2)
0 Kudos
5 Replies
Rakshith_K_Intel
Employee
89 Views

Can you try testing on actual device, it should not do that.

Add <preference name="DisallowOverscroll" value="true" /> in your intelxdk.config.additions.xml file, this will preview scroll bounce.

Kellen_R_
Beginner
89 Views

Rakshith Krishnappa (Intel) wrote:

Can you try testing on actual device, it should not do that.

Add <preference name="DisallowOverscroll" value="true" /> in your intelxdk.config.additions.xml file, this will preview scroll bounce.

I did test on two Android mobile devices (different viewports) and it behaves the same way as the emulator.

Kellen_R_
Beginner
89 Views

I believe I found the issue and corrected it.  You can reproduce to confirm simply by using the built-in XDK template Side Menu App.

~\www\app_framework\2.1\appframework.ui.js

Line 1711:  this.elementInfo.hasVertScroll = this.verticalScroll || this.elementInfo.maxTop > 0;

The original conditional statement is above incorrect.  this.verticalScroll can be true for almost all elements, even if the content does not exceed the viewport.  The correction below changes the conditional to use AND rather than OR.  This fixes the issue and the resulting behavior is as expected.

Line 1711:  this.elementInfo.hasVertScroll = this.verticalScroll && this.elementInfo.maxTop > 0;

 

Reginaldo_P_
Beginner
89 Views

Hi Kellen R.

You saved my day... your solution is perfect. 
I just googled around for days until get to this post... and nothing!

Many, many thanks.

Reginaldo

89 Views

As Rakshith mention, just put this code on intelxdk.config.additions.xml, and everything runs very well.

<preference name="DisallowOverscroll" value="true" />

 

Reply