0

following problem. im using a simple jquery plugin located here it works fine so far, problem is when im testing it on a touch device (eg ipad2) its not possible to scroll within a div. it does not work with 2 finger swipe too! i guess the behaviour is not the same to the "standard" scrollbar. but is there any solution to make this touchable?

im in the testing phase, which means the body code is pretty simple

$(document).ready(function() {

function appenddiv() {
    var $scrolling = $('<div id="test" class="scrolling">A lot of text in here ...<div id="scroll2"><img src="../images/31670035.jpg"></div></div>');


$scrolling.appendTo($('#container')).scrollbar();

}

$('#scrollbar-link').on('click', function() {
    appenddiv();
});
});

<body>
<a href="#" id="scrollbar-link">Klick mich!</a>

<div id="container">
</div>
</body>

Do i need something like a "touchable" script which makes it possible to swipe the scroller?

Thanks

supersize
  • 13,764
  • 18
  • 74
  • 133
  • It means hacking that third party library to use touch events. Good Luck. – epascarello Feb 22 '13 at 14:13
  • but i cant be the only one who is using custom scrollbars on a touch device huh? im open for any new method to do that, i dont especially want that plugin! – supersize Feb 22 '13 at 14:15

2 Answers2

2

:-) Yes, this is definetly an issue...

The root problem is the following:
To create custom scrollbars you need to make DIV overflow: hidden - to hide sys scrollbars. This is OK. BUT on mobile (iPad too) devices from this point your DIV will not be scrollable. It will be (only), if you use overflow: auto ... This is logical - more or less. But drives you to the headache you have now :-)

So, you have to make a choice at this point..

a) you forget your custom scrollbar on touch devices - keep overflow: auto there
b) you implement a drag&drop feature manually - if you detect a mobile device

version b) would be tricky - again. since the event we know as "mousedown" event works differently on touchscreens. There is not only one mousedown - in fact there may be an array of "mousedown"s since you touche the screen with your finger, then you touch the screen with another finger, and so on... so on touchscreens this is a touch[] array...

makes sense absolutely, but complicates things...

Either way, I don't know about any less complex solutions... If anyone does, I'm curious about that too!! :-)

We did a lot of testing and put many effort into this issue (and to other issues too) while was working on our NiceScrollbars library project...

I'm here if you would like to discuss this problem deeper! Will try to help

Attila Wind
  • 748
  • 1
  • 6
  • 12
  • well thanks for your detailed answer! it makes sense. my other option is to style the scrollbar with css, which works pretty good on all webkit browser! but that means (despite ie anyways) it does not work on firefox or opera! but maybe this could be your answer, ive found a very helpful article `http://css-tricks.com/custom-scrollbars-in-webkit/` on topic: i think a drag and drop variant could be possible, but i dont want to invest much time in it, because the client aint paying as much for that, haha! – supersize Feb 22 '13 at 14:33
  • Clear. :-) Yes, you may try css if this is enough and you do not face with hard "make it cross-browser!" issues. :-) But in this case maybe you should consider version a)! Really! All you need is to be able to detect mobile (or touchscreen) vs normal browser! – Attila Wind Feb 22 '13 at 14:37
  • is this done with a simple useragent detection and jquery ui? and apply the "scrollbar handler" to be dragable? – supersize Feb 22 '13 at 14:46
  • useragent detection is only one part of it. from that you will know only that this is a mobile browser or not. It is still possible that this is not a mobile browser but a touchscreen... Here is what we are using (I can not add code here but..) var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion); var hasTouch = ('ontouchstart' in window && !isTouchPad); – Attila Wind Feb 22 '13 at 14:53
  • I've just found the "related" column on the right :-) And since the issue here for you is how to detect if touchscreen / mobile I found [this question](http://stackoverflow.com/questions/6262584/how-to-determine-if-the-client-is-a-touch-device?rq=1) there.. I'm planning to read through that carefully later, so I marked that one. But probably the answer(s) should be valuable (as far as I saw). One more thing: if you think this was an answer, could you accept that? I need to collect enough reputation to gain the "Comment anywhere" privilege!! :-) Would say a big thanks for doing so... – Attila Wind Feb 22 '13 at 16:58
0

Either way, I don't know about any less complex solutions... If anyone does, I'm curious about that too!! :-)

In theory, we could add a div with opacity=0.000000000001, z-index -1 (-1 index from the original div. i.e. the original div has a z-index of 10, then the new div would have a z-index of 9) and scroll=auto. The new div would be a copy of the div with scroll=hidden attributes in terms of content and css.

The scroll event would fire via the hidden div and then update the visible div.

Too bad we have to go to that extend, but it seems to be another clean solution/hack beside the fact that you have to duplicate the content or create an element that holds the content height.

INF1
  • 613
  • 8
  • 9
  • proof that it is a working solution and not a theory via this fiddle (tested on chrome android 4.4.4): http://jsfiddle.net/INF1/a2yy46rq/1/ – INF1 Jun 19 '15 at 10:19