Question

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

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

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

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

我们有另一种解决方案（我认为，这更容易）如果无法选择拇指 -div of tinyscrollbar，则在悬停时不会选择下方或上方的任何其他部分。
所以我们将 noSelect - 类添加到 thumb -div，这对我们有用。
只有在IE上，我们仍然遇到了问题。我们在拇指 -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;
}

Answer 3

对于现代浏览器，请使用CSS：＆＃39;用户选择＆＃39;：＆＃39;无＆＃39 ;;在容器上。对于旧版浏览器（例如IE），请使用＆＃34; onselectstart＆＃34; JavaScript中的事件。

这个答案解决了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
    });
}

Tinyscrollbar - 禁用选择或突出显示

5 个答案: