Allow flick-scrolling in application

edited January 2014 in Enyo 2.4
First, here is an instance of my project.

The interface is easily navigable on a PC web browser, but the mobile interface has serious problems. In every Android web browser I have tested except Firefox, scrolling is impossible. In Firefox, scrolling is possible only after a long tap.

I have tried a few things, such as removing the enyo-unselectable class from the body, catching ontouchmove in all elements to execute "inEvent.preventDefault()", and some other things that I can not remember off the top of my head. None of these having had any effect, I reverted to the unaltered version that is linked in the first line.

I know that there has to be a simple solution to this, but I simply don't know where to look for it. The closest thing I have found is to make the outermost div into an enyo.Scroller, but that looks terrible in a PC web browser and I doubt it is the "right" way to do this.

Any suggestions to fix this would be greatly appreciated. Thank you.

EDIT: On a side note, the "Restart" button looks ugly in all mobile browsers I have tested except Firefox. Specifically, the text seems to float right within the button. Suggestions to fix this are also welcome.

EDIT 2: Let me clarify "flick-scrolling" in case the term has a specific meaning that I am not using correctly. I would like the user to be able to scroll the page by dragging his/her finger on the page, just like (for an easy example) Google search, or most any webpage at all, is scrolled in a mobile browser.

Comments

  • Enyo was originally designed for webOS applications where there was no native scrolling, so scrolling of app regions has always relied on enyo.Scroller. Is your application designed so that the actual page content isn't inside something like a scroller or panels? The usual use case is making some top-level control that fits to the window size, then scrolling a region inside of that.

    You might try forcing touch mode -- that removes any scroll bars that are normally shown in the desktop browser.
  • Right now, the app has no Panels or Scrollers. The main building blocks are Controls, which typically have the tag "div".

    Thanks for your comments. Tomorrow I will try implementing a Scroller and forcing touch mode and see how it goes.

    Thanks again!
  • Okay, I'm testing the Scroller kind right now, and will probably end up fixing the positions of the navigation bar on the top and the submit button on the bottom, and scroll everything in between.

    But, before I go that far, I need to work out a problem that I am currently having with the Scroller. I made the top component a Scroller, and set its strategyKind to "TouchScrollStrategy", and this does allow scrolling of the page, but the view always bounces back to the top after I lift my finger. That is, it does not *stay* scrolled down.

    I tried setting touchOverflow, which looked relevant, to false, but that did not help the issue.

    This test is hosted here.
  • Scroller need an explicit height added to them for it to work
  • Ah! Thank you muchly. I will see what that does for me.
  • That works beautifully. Thank you both very much.
Sign In or Register to comment.