CODEWITHSUNDEEP
iscroll4iscroll
lojamets
lojamets

Reputation: 51

iScroll with a draggable desktop browser scrollbar

I would like to make my webpage, that uses iScroll4, a little bit better for desktop (linux, mac or pc) browser users. I would like to add the drag-able scrollbar to the iScroll component and hide the default indicator. Or if the default indicator can be changed somehow to accept clicks and drags - that would be great also.

So far I have changed the iScroll event-handler in this way:

from:

case MOVE_EV: that._move(e); break;
case END_EV:

to:

case MOVE_EV: that.disable(); break;
case END_EV: that.enable(); break;

This change is done because otherwise the drag-down within the iScroll element would scroll the page in the wrong direction.

Now I have some serious problems displaying the actual scrollbar in the iScroll element. Adding:

overflow:scroll;

to the div that contains iScroll, makes the scrollbar visible only for few moments and only after mouse scroll. The scrollbar then fades away.

If anyone has any great ideas, how to change the iScroll.js file in a way that the iScroll can actually change itself to have drag-able scrollbar, that would be wonderful.

I would also like to note, that I would like to preserve the option to use iScroll in a default way for touch-enabled devices and change the default behaviour for only desktop browsers.

Upvotes: 2

Views: 3071

Answers (2)

Boaz
Boaz

Reputation: 20220

In iScroll 5 there is an option called interactiveScrollbars which makes the scrollbar "draggable and user can interact with it": http://iscrolljs.com/#scrollbars

Note this option is set by default to false, so in order to enable it you'll need to explicitly set it to true, for example:

var someElementWrapper = document.getElementById('some-element-wrapper');
new IScroll(someElementWrapper, {scrollbars: true, interactiveScrollbars: true});

This matter has also been reported as issue #342 (now closed) in the iScroll Github repository.

Upvotes: 1

lojamets
lojamets

Reputation: 51

I found the solution that ZoranJambor has made on github:

https://github.com/ZoranJambor/iscroll

He's iScroll has an additional parameter draggableScrollbars that can be set to true if you would like to have draggable scrollbars.

See also the example at:

https://github.com/ZoranJambor/iscroll/tree/master/examples/draggable-scrollbars

Thank you and hopefully this helps someone else also - I spent two whole days on searching for the solution.

BR!

Upvotes: 3

Related Questions