javascript - Tinyscrollbar - 禁用选择或突出显示

Question

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

但是，我遇到的问题是，如果用户使用滚动条滚动并且光标在滑动时没有悬停在“拇指”元素上，则背景内容会突出显示，类似于您单击并突出显示文本时看到的内容或元素。

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

Answer 1

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

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

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

Answer 2

我们有另一个解决方案（我认为，它更容易）。
如果 tinyscrollbar 的thumb -div 不能被选中，那么在悬停的时候，下面或上面的任何其他部分也不会被选中。
所以我们将noSelect -class 添加到thumb -div，这对我们有用。
只有在 IE 上我们仍然有问题。我们将属性unselectable="on"添加到thumb -div 确实有效。

我们最终得到了这段代码：

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

Answer 3

对于现代浏览器，使用 CSS: 'user-select': 'none'; 在容器上。对于较旧的浏览器（例如 IE），请在 JavaScript 中使用“onselectstart”事件。

这个答案解决了 jQuery 插件的问题： How to disable text selection using jQuery?

Answer 4

在 TinyScrollbar 插件中，找到这个函数：

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

添加return false

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

Answer 5

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

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

然后将这些添加到一个在 document.ready 上调用的 js 文件中

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