3

私は自分のサイトでJQueryTinyscrollbarプラグインを使用しています。特定の要件により、垂直スクロールバーと水平スクロールバーの両方で同時に機能するように小さな変更を加えました。

ただし、ユーザーがスクロールバーを使用してスクロールする場所で、スライド中にカーソルが「thumb」要素にカーソルを合わせていない場合、テキストをクリックして強調表示したときと同じように、背景のコンテンツが強調表示されるという問題があります。エレメント。

どうすればこれを防ぐことができますか。ありがとう。

4

5 に答える 5

5

.noSelect クラスを CSS に追加する必要があります

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

Tinyscrollbar がドラッグされると、.noSelect クラスがページの本文に追加され、ドラッグが完了すると削除されます。

于 2012-10-18T13:34:10.577 に答える
3

別の解決策があります (もっと簡単だと思います)。
tinyscrollbarのつまみ-div が選択できない場合、ホバリング中に上下の他の部分も選択されません。そのため、 noSelectクラスをThumb
div に追加したところ、うまくいきました。 IE でのみ、まだ問題がありました。つまみに属性unselectable="on"を追加しました-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;
}
于 2013-03-07T15:43:23.843 に答える
1

最新のブラウザーでは、CSS を使用します: 'user-select': 'none'; コンテナに。古いブラウザー (IE など) の場合は、JavaScript で「onselectstart」イベントを使用します。

この回答は、jQuery プラグインの問題に対処しています: How to disable text selection using jQuery?

于 2012-07-23T22:50:13.197 に答える
0

私は何かを試してみましたが、うまくいくようです。ということで、困っている方の参考になればと思って投稿させていただきました。私のソリューションを改善してください。

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
    });
}
于 2012-07-24T01:22:10.980 に答える