Slick Custom Scrollbar iPad support?

[bbuller]

1) Script Title:
Slick Custom Scrollbar script v1.1
Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex11/scrollc.htm
3) Describe problem:
It appears that this script does not work with iPad. Can anyone confirm? I don't have an iPad, but the client has told me it won't work on their iPad. Could it be that the bars need to be bigger, so there is something to touch drag?

Here is a link to where I'm using the script.: http://www.tarmacconsulting.com/GS3/...nd-events.html
Thanks.

[bernie1227]

Well it doesn't work on iPad in that you can't drag the scroll bar, but you can tap further down on the bar and the scroll bar will move to that point. My advice, would be that you could make it drag able in touch, using JavaScript.

[djr33]

I have an iPhone, but it should work very similarly to the iPad if not identically. My responses are based on that.

1. Some Javascript menus/scrollers/etc. simply don't work because the input method (usually hover) is not part of touchscreen devices. This is not the case. Physically, the devices should be able to handle this script.

2. There are three ways to make the content move. Two of the three do not work on the iPhone:
i) Drag the scrollbar up/down or left/right. This does not work on the iPhone. You can 'click' the scrollbar, but instead of scrolling the menu instead it scrolls the entire page because the iOS seems to override the command for easier manipulation of the window.
ii) Use a scroll wheel (or equivalent) to move the content. This does not work on the iPhone because there is no such gesture available (at least on my phone-- perhaps in the newer versions or in the future there will be).
iii) Click at a location on the 'height' or 'width' bar so that the scrollbar will move to that location. This DOES work on the iPhone without any problems. The content scrolls properly.

3) Based on the facts in (2), this is an input problem not a code-compatibility problem. The solution would be to work with Apple's touch/gesture API to, for example, override the default command to scroll the whole page/window with a touch and instead allow the scrollbar to work independently of that. I think it's possible. But it might be difficult, and it would need to be a specific fix just for iOS.

4) Because you can in fact use this menu by clicking on the scrollbar area to move it, you could instead educate your visitors, but that might be difficult, more effort than it's worth. But you could, on the other hand, just try to make it more obvious visually-- add some dots to the background (rather than a single color) and maybe that would clear it up. Or add a special extra button for iOS (this can be done based on the current browser in Javascript) for scrolling-- either at the edge of the pages (a down/up, left/right arrove, for example) or at the ends of the scrollbar frame.

5) No, the size of the bars is not relevant. It is somewhat difficult to grab/click them when they're tiny on the page, but the iOS allows easy zooming so they can be as big as you'd like and then it's easy to access them-- but they just don't work.



So this won't work for you. Fixing it would probably be a big project (and beyond my personal ability in Javascript-- I'm just troubleshooting it for you at the moment). Your realistic solutions are to find a new scroller and 1) replace it; or 2) conditionally replace it based on the browser. OR 3) fix this script yourself such as by adding extra buttons for iOS users.

Another clever trick would be to add automated scrolling to this. That way if a user couldn't access it at least they could watch as it scrolled by. You could do that relatively easily I think. It wouldn't need to interfere with the existing script. (And you could add a 'pause' button if you want. And also pause it on 'hover', which doesn't exist on iOS.)

[bbuller]

Thanks for the input. TinyScroll Bar is an option I'm considering... it seems to work, but it relies on background PNGs instead of CSS created scroll bars, so it's harder to customize, and just doesn't look as good. http://baijs.nl/tinyscrollbar/