Javascript Tinyscrollbar-禁用选择或高亮显示

我正在我的网站上使用jquerytinyscrollbar插件。由于我的特殊要求，我做了一些小的改动，使它能够同时使用垂直和水平滚动条

但是，我遇到的问题是，如果用户使用滚动条滚动到何处，并且滑动时光标未悬停在“thumb”元素上，背景内容会高亮显示，类似于单击并高亮显示文本或元素时看到的内容

---

我怎样才能防止这种情况发生。谢谢

对于现代浏览器，使用CSS:'user select'：'none'；在集装箱上。 对于较旧的浏览器（例如IE），在JavaScript中使用“onselectstart”事件

这个答案解决了jQuery插件的问题：

---

我尝试了一些东西，似乎奏效了。所以我会把它贴在这里，这样可能会对其他可能有问题的人有所帮助。请随时改进我的解决方案

添加到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;
}   

然后将它们添加到一个js文件中，该文件在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
    });
}

函数禁用选择（）
{   
//查找所有DIV元素
$（“body>div”）。每个（函数（）{
var-context=$（这个）；
addClass（'unselectable'）；
context.attr（'unselectable'，'on'）；//用于IE<10和Opera
});
}

您需要将.noSelect类添加到CSS中

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

拖动Tinyscrollbar时，.noSelect类将添加到页面主体中，然后在拖动完成后删除。

我们有另一种解决方案（我认为更简单）。
如果无法选择tinyscrollbar的拇指-div，则在悬停时也不会选择下面或上面的任何其他部分。
因此，我们在thumb-div中添加了noSelect-类，这对我们很有用。
只有在IE上，我们仍然有问题。我们将属性unselectable=“on”添加到thumb-div确实有效

我们最终得到了以下代码：

HTML:

---

在TinyScrollbar插件中，找到以下函数：

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

添加

返回false

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

---

这是我尝试的第一件事，但当使用Tinyscrollbar插件时，它不起作用。添加unselectable=“on”有助于在IE7/WinXP中修复它，您还可以使用

event.preventDefault（）而不是返回false。
function start(event) {
    ...
    ...
}

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