Within my Blackberry Webworks app designed for Smartphones OS 6, 7, and 7.1, there is a portion of code that looks like this:
<div style="width:100%; height:100%; overflow:hidden;">
<div style="overflow:auto;height:100px;width:100%;">
<ul>
<li>Some</li>
<li>Items</li>
<li>that</li>
<li>needs</li>
<li>the</li>
<li>div</li>
<li>to</li>
<li>be</li>
<li>scrolled</li>
</ul>
</div>
</div>
While attempting to scroll the div using a touch gesture, I noticed that I always have to first touch the div element (like a click) before the scrolling gesture actually works. This means I have to tap it, then scroll, and if I want to scroll again (even without touching anything else in between), I have to touch it once more before being able to scroll again.
To clarify: The touch gesture only works every other time I try it (if not touching anything else in between).
This odd behavior is causing usability issues for the application.
Do you have any suggestions on how to modify this behavior?
I attempted to listen to touch events (touchstart and touchmove) and manually scroll the div myself, which worked to some extent. However, it lacks the smooth native scrolling behavior where it continues scrolling if the gesture is swift, and it also seems to interfere with click events somehow (although the reason is unclear), leading to less desirable results than before.