Software Archive
Read-only legacy content
17061 Discussions

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

Kellen_R_
Beginner
478 Views

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

 

0 Kudos
5 Replies
Rakshith_K_Intel
Employee
478 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.

0 Kudos
Kellen_R_
Beginner
478 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.

0 Kudos
Kellen_R_
Beginner
478 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;

 

0 Kudos
Reginaldo_P_
Beginner
478 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

0 Kudos
Muhammad_Y_Efendi
478 Views

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

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

 

0 Kudos
Reply