Tinyscrollbar - Disable Selection or Highlight

Question

I am using JQuery Tinyscrollbar plugin on my site. Due to my specific requirements, I did minor changes to make it work with both vertical and horizontal scrollbars at the same time.

However, I am having issues where if a user where to scroll using the scrollbars and the cursor is not hovering on the "thumb" element while sliding, the background contents gets highlighted, similar to what you see when you click and highlight a text or element.

How can I prevent this from happening. Thanks.

score 5 · Answer 1 · answered Oct 18 '12 at 13:34

You need to add the the .noSelect class to your CSS

.noSelect { 
    user-select: none; 
    -o-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
}

When the Tinyscrollbar is dragged, the .noSelect class is added to the body of the page and then removed when dragging has finished.

score 3 · Answer 2 · answered Mar 07 '13 at 15:43

We have another solution (I think, it's even easier).
If the thumb-div of tinyscrollbar can not be selected, any other part below or above will not be selected either while hovering.
So we added the noSelect-class to the thumb-div, what worked for us.
Only on IE we still had the problems. We added the attribute unselectable="on" to the thumb-div did work.

We ended up with this code:

HTML:

<div class="scrollbar">
  <div class="track">
    <div class="thumb noSelect" unselectable="on">
      <div class="end"></div>
    </div>
  </div>
</div>

CSS:

.noSelect { 
  user-select: none; 
  -o-user-select: none; 
  -ms-user-select: none;
  -moz-user-select: none; 
  -khtml-user-select: none; 
  -webkit-user-select: none; 
  -webkit-touch-callout: none;
}

score 1 · Answer 3 · edited May 23 '17 at 12:03

1

For modern browsers, use CSS: 'user-select': 'none'; on the container. For older browsers (e.g. IE), use "onselectstart" event in JavaScript.

This answer addresses the problem with a jQuery plugin: How to disable text selection using jQuery?

edited May 23 '17 at 12:03

Community

1
1

answered Jul 23 '12 at 22:50

Joe

21
2

That was one of the first thing that I tried but it doesn't work when using with Tinyscrollbar plugin. http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting – asyadiqin Jul 24 '12 at 00:49
adding unselectable="on" helped fix it in IE7/WinXP
– Polsonby Jul 18 '13 at 19:27

score 1 · Answer 4 · answered Mar 08 '13 at 13:07

1

Inside the TinyScrollbar plugin, find this function:

function start(event) {
    ...
    ...
}

Add return false

function start(event) {
    ...
    ...
    return false;
}

answered Mar 08 '13 at 13:07

Taufik Nurrohman

3,329
24
39

You can also use `event.preventDefault();` instead of returning false. – gonchuki Oct 02 '13 at 19:56

score 0 · Answer 5 · answered Jul 24 '12 at 01:22

I tried something and it seems to work. So I'll post it here so it might be of help to anyone else who might have issues. Please feel free to improve my solution.

Added into CSS

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Then added these into a js file which is called on document.ready

function DisableSelection()
{   
    // Find all DIV elements
    $("body > div").each(function(){
        var context = $(this);
        context.addClass('unselectable');
        context.attr('unselectable','on'); // for IE < 10 and Opera
    });
}

Tinyscrollbar - Disable Selection or Highlight

5 Answers5