davidaurelio / touchscroll Goto Github PK

The optional DOM scroll event is only fired, as long as the user touches the device or the mouse button is being pressed. But if the user "swipes", the content continues to scroll after the finger movements has ended . This is problematic when you rely on the scroll event. The Behavior should the same as on a MacBook Trackpad (or Magic TrackPad), where scroll events are thrown until scrolling has stopped entirely.

When the page loads, the scrollbars are hidden. When you scroll on it, the scrollbar appears, but never goes away.

This isn't a huge issue, but I thought I would bring it up regardless.

On the iphone/ipad (not sure about andriod, I don't have a test device handy) even if a page is smaller than the viewport its possible to scroll the page. I think it would be nice to at least have the option for this in touchscroll to get the behavior closer to native.

Hi ...

Thanks for nice code ....

Is there a way we can get the drop down list get the touch event in the form. I am able to get the radio button in action by adding or condition along with check box.

Thanks
VP

I have tried to add URL Bar hiding at load on orientation change events. But it does not work. I did not find hard-coded "height" dimensions as possible reasons. The approach choosen to hide the URL bar is a delayed window.scrollTo :

setTimeout(function() { window.scrollTo(0, 1); }, 100);

When we scroll too much, the behaviour is respected as in the native environment.
But, when we scroll too much, as just after you rescroll (when the snapback hasn't been completed), the scroll is not reset. Try it on a native application : if you scroll too much and just touch anywhere on the screen, the scroll is reset. That's important because if you scroll, rescroll, rescroll, rescroll quickly, at a moment you don't see the content at all.

Nobody seems to notice this "bug" so it probably isn't. But here's my issue:

In the demo there are some inline href links within the text (inside the #scroller div). Links at this level appear to receive 2 clicks.

Simply add a "_blank" as the target and every link will open 2 browser windows. Links OUTSIDE the #scroller work fine. For example, find the following:

<a href="http://uxebu.com/blog"> our blog</a>

And replace with:

<a href="http://uxebu.com/blog" target="_blank"> our blog</a>

... 2 browser windows will load. The exact same thing happens if you try to put some inline javascript (onClick) to call js functions—but only if your link is within #scroller.

If I'm "doing it wrong" it's non-obvious to me what it can be.

I am using horizontal scrolling for an image.

After using touch scroll, horizontal scrolling is working successfully.

But default vertical scroll behaviour of jquery mobile is not working

Can you please help to rectify this issue?

When moving between views using the bottom menu (for example moving from the 'Horizontal' page to the 'About' page) if the scroll bar is present on the first page it disappears on the second but the page height remains the same leaving a white gap at the bottom of the page. I think this problem could be gotten around by using phonegap (or similar) but it would be good if this worked on Android as it does on iphone.

Tapping the title bar on iPad/-Phone/-Pod should scroll to top. Problem: If more than one scroller is defined, how do we find out which one is active and/or visible.

I've the page that uses touchscroll.js and in old Androids after focusing input on the page the keyboard does not appear.
The fix that helped me was to check if the properties are defined in browser

function setTransitionProperty(/HTMLElement/node){
if ('webkitTransformStyle' in document.body.style) {
node.style.webkitTransformStyle = "preserve-3d";
}
if ('webkitTransitionProperty' in document.body.style) {
node.style.webkitTransitionProperty = "-webkit-transform";
}
};

If you start scrolling with your finger within a form element (a textarea for example) it'll scroll both the entire viewport and the element set for touchscroll.

Is it possible to have a "pull to refresh" with TouchScroll, any example?

At the end of a scroll, click events are being initiated on elements that weren't touched. This is a new issue that has been introduced within the past few days of changes. Can't scroll without it having unintended click events being fired.

on an iOS device with footer buttons (iphone, ipod touch) I've found an issue where if you start scrolling and then lift your finger after its in the "footer button" area, the scroll will get stuck its its last position. This problem only seems to be with the footer buttons, the header (nav bar) does not seem to have an affect on scrolling.

Procedure:

1. Create a long content layout
2. Scroll down to the bottom
3. Relayout the page to make it much shorter

Result:

Touchscroll does not scroll back up the page giving the effect of a blank page. Furthermore, it is impossible to scroll back up.

A small idea for an enhancement.

Could be implemented by adding a new config parameter which defines in pixels the width or height of repeated 'stopping points' along the width or height of the scrollers content.

This would allow reproducing effects similar to what is seen in the native photo gallery apps in iPhone/iPad, where a flick is used to move the interface to the next or previous picture.

Eg, if I passed in {'stopping-width: 300'} then an initial flick to the right will take me 300px into the content (ie a x offset of -300px), a further flick 600px, etc...

I'm building an app with a page of links that butt up against each other and take up the full width of the page (as you would see it just about any iphone app.)

Currently the scrolling is a bit choppy with touchscroll when items have a hover or active state. This isn't a huge issue as I'm going to remove these states if the site is on mobile safari, but I thought I would at least mention it anyways.

I have two scrollers side-by-side, one with a fixed width, while the other can scroll horizontally. I've managed to modify the code to allow for linking the two during scrolling, so scrolling in one causes the other to scroll, but flicking results in some strange behavior.

Is it possible to apply the same flick animation to a second scroller?

Results in content truncated. Truncated region can sometimes be accessed by flicking down from the top. But when a touch is registered on truncated regions, it will snap back to the top, and subsequent scrolling fails.

This behavior is observed in the demo as well: http://static.uxebu.com/~david/touchscroll/alpha/

This is observed on iphone4 safari browser, latest update (as of dec 2011), and on chrome (desktop).

When you drag to the top or bottom of the scrollview container, a css matrix transform is applied to the scrollbar and "squeezes" it. This also squeezes the border radius. Aesthetically speaking, it just looks weird and doesn't match the one on iPhone/Pod/Pad :)

On the iPhone:

1. Scroll on a page
2. Hit an element that has onClick() function
   => Nothing happens
3. Hit it again
   => Works

The function: _preventNextClick() is the root cause of this issue. I'm not sure why this function was introduced in the first place... but removing its call from onTouchMove fixes my issue. I think the handler should be removed from onTouchEnd().

Maybe this is by design, but the demo scrolling gets sticky because it doesn't come stock with css-beziers. Since I, like most people, skip over the readme, it took me a long time to figure this out.

Would you be willing to add this?
<script src="https://github.com/davidaurelio/css-beziers/raw/master/src/css-beziers.js"></script>

That way you still don't have to include it in your project, but developers looking through your demo/index.html will know they need it.

I am having a problem that, when a page gets overly complex (many nested divs), all of the select options and buttons stop working properly within the touchscroll pane.

The elements can be tabbed through to see the options, but clicking them no longer works.

Has anyone else faced this or a similar issue? any workaround?

Thanks,
Garret

There's a page with a list. When you click on the list item the content for the item is loaded via ajax. In ajax callback .scrollTo() method is used to scroll the page up. And this method makes error. I've found that bug appears here:
getMatrixFromNode = function(/HTMLElement/node){ /WebKitCSSMatrix/
var doc = node.ownerDocument,
transform = window.getComputedStyle(node).webkitTransform;

  return new WebKitCSSMatrix(transform);
}

typeof WebKitCSSMatrix returns 'object' instead of 'function'

Hello,
I am a newbie in the development of webapps with Jqtscroll. I was just wondering if I can set the position of the scrollbar starting from the maximum width of window. for e,g if the width of window is 320 then the scrollbar should be set at the 320 pixel position & for landscape at 480. The reason is I have an image and want to view the data in the image at the rightmost position first & to be able to scroll on the left hand side afterwards.

thanks
cam

the iphone has a next and previous button to move between form elements. If the next element is out of view, and you press the next button the element will be selected, but the view won't scroll to show the element.

If a touch is made following a flick then the scrolling hangs on Android 2.1. This happens only if the fling animation is still occurring, and causes a problem when the fling would ordinarily be followed by a snapback as the fling has gone off the screen.

It's a bit difficult to explain but very easy to replicate on a handset running Android 2.1.

If a page using TouchScroll is loaded inside an iframe and the page has inputs, the input's key entry is unresponsive when a user moves the cursor in the input box using a touch, hold, move the cursor, and release. After that action, no keyboard entries are registered in the input even though the cursor is available and the input is considered active.