Tinyscrollbar - 禁用选择或高亮显示

Question

我在我的网站上使用JQuery Tinyscrollbar插件。由于我的特定要求，我进行了一些小改动，使它可以同时适用于垂直和水平滚动条。

然而，如果用户在使用滚动条时光标没有悬停在“thumb”元素上滑动，就会出现问题，背景内容会被突出显示，类似于您在单击和突出显示文本或元素时看到的情况。

如何防止这种情况发生。谢谢。

- asyadiqin

Answer 1

你需要在CSS中添加.noSelect类。

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

当 Tinyscrollbar 被拖动时，.noSelect 类会被添加到页面的 body 中，并在拖动结束时移除。

- andyace

Answer 2

我们有另一个解决方案（我认为，它甚至更容易）。如果tinyscrollbar的“thumb”-div无法被选择，则在悬停时下面或上面的任何其他部分也不会被选择。因此，我们向“thumb”-div添加了“noSelect”类，这对我们有用。只有在IE上我们仍然有问题。我们向“thumb”-div添加了属性“unselectable =“ on””，这样做起来有效。

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

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

- Rainer Jung

Answer 3

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

此答案解决了一个jQuery插件的问题： 如何使用jQuery禁用文本选择？

- Joe

---

那是我尝试的第一件事情之一，但在使用Tinyscrollbar插件时它不起作用。 https://dev59.com/pnRA5IYBdhLWcg3wyRF6 - asyadiqin

在IE7/WinXP中添加unselectable="on"可以帮助解决问题 <div class="track"><div class="thumb" unselectable="on"> - Polsonby

Answer 4

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

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

添加 return false。

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

- Taufik Nurrohman

---

你也可以使用 event.preventDefault(); 代替返回 false。 - gonchuki

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

然后将它们添加到一个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
    });
}

- asyadiqin