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.

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.

• javascript
• jquery
• css
• jquery-plugins
• tinyscrollbar

Share Improve this question Follow asked Jul 23, 2012 at 22:31 asyadiqinasyadiqin 1,66733 gold badges1919 silver badges2525 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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.

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;
}

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?

Inside the TinyScrollbar plugin, find this function:

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

Add return false

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

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
    });
}