So I'm using jquery nicescroll plugin, and love the fact that it supports touch devices with option:

touchbehavior:true,

I've enabled this feature because of touch devices and because i love scrolling whit click and drag with mouse.

But something else is bothering me. Div which is scrollable containst links and much text. Links are clickable but this touchbehavior disables text selection what really bother me. I wanna keep selecting text enabled.

Except from that, when this touchbehavior is enabled, you can not click on actual scrollbar anymore and drag it down, what is really confusing on default puter or laptop. Is it possible to have touchbehavior and clickable and draggable scrollbar at the same time?

What I'm talking about is available to test and edit on this link: /

Code looks like this;

html:

<div class="outer">
<div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet nisi non 
    felis fringilla dignissim non et diam. Fusce et molestie nibh, pulvinar 
     tincidunt felis. Aenean hendrerit non dolor in mollis. Sed vehicula felis 
    eget tempor bibendum. Praesent modo pretium sodales. Integer sit amet 
    semper lacus. <a href="www.google" >Cras imperdiet lectus at 
    sapien tempus malesuada.</a>..........
</div>
</div>

script:

$(".outer").niceScroll({
    cursorwidth:"6px",
    cursorborder: "0px",
    bouncescroll: true,
    horizrailenabled: false,
    touchbehavior:true,
    grabcursorenabled: true,
});

Any help or advice is wele.

So I'm using jquery nicescroll plugin, and love the fact that it supports touch devices with option:

touchbehavior:true,

I've enabled this feature because of touch devices and because i love scrolling whit click and drag with mouse.

But something else is bothering me. Div which is scrollable containst links and much text. Links are clickable but this touchbehavior disables text selection what really bother me. I wanna keep selecting text enabled.

Except from that, when this touchbehavior is enabled, you can not click on actual scrollbar anymore and drag it down, what is really confusing on default puter or laptop. Is it possible to have touchbehavior and clickable and draggable scrollbar at the same time?

What I'm talking about is available to test and edit on this link: http://jsfiddle/P8cPZ/

Code looks like this;

html:

<div class="outer">
<div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet nisi non 
    felis fringilla dignissim non et diam. Fusce et molestie nibh, pulvinar 
     tincidunt felis. Aenean hendrerit non dolor in mollis. Sed vehicula felis 
    eget tempor bibendum. Praesent modo pretium sodales. Integer sit amet 
    semper lacus. <a href="www.google." >Cras imperdiet lectus at 
    sapien tempus malesuada.</a>..........
</div>
</div>

script:

$(".outer").niceScroll({
    cursorwidth:"6px",
    cursorborder: "0px",
    bouncescroll: true,
    horizrailenabled: false,
    touchbehavior:true,
    grabcursorenabled: true,
});

Any help or advice is wele.

• javascript
• jquery
• html
• css
• nicescroll

• Have you solved this ? – Nishant Nawarkhede Commented May 13, 2014 at 9:14

4 Answers 4

There is an option cursordragontouch. Set it to TRUE and your scroll bar will work as usual. I mean you can bine cursordragontouch and emulatetouch:

$( '#something' ).niceScroll
(
 {
  emulatetouch: true,
  cursordragontouch: true
 }
);

Set touchbehavior to true and preventmultitouchscrolling to false. You will able to drag and trigger any links.

touchbehavior: true,
preventmultitouchscrolling: false, 

Touchbehavior is only if you want to emulate touch behavior on desktop. You should set it to false or remove it. (its default is false anyway) You don't need it on desktop. And touch support is build in automatically for touch devices.

This worked for me!

    zindex: 9999,
    emulatetouch: true,
    cursordragontouch: true,
    touchbehavior: true,
    preventmultitouchscrolling: false,