7

内部に div がある div があります。外側のものには がoverflow-y: auto;あるため、多くの内部アイテムで右のスクロールバーが表示されます。スクロールバーの上でマウスの左ボタンを押した後$('#container').selectable();、スクロールせず、選択用の点線のフレームが表示されます。

私はこの解決策を見つけました: JQuery UI Selectable plugin: Make scroll bar not selectable when div overloads

残念ながら、一番下までスクロールすると項目が選択できなくなるため、うまくいきません。（トップのものは続きますが）。問題は、コンテナを 2 つの div に分割せずに、スクロールバーを...うーん...スクロールバーにする方法です。

4

2 に答える 2

7

まあ、それはすべてのブラウザーの問題のようです。スクロールバーをクリックすると、マウスイベントが発生します。これが本当の問題です。jQuery UI では解決できません。jQuery UI .js ファイルで独自に修正しましょう (難読化されているはずなので、最小バージョンには適用されません)。

この条件を追加

if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
    return;

の直後

_mouseDown: function(event) {

私は検出器を使ったそのようなハックをたくさん見てきましたが、HasScrollbar()クライアントの幅 (つまり、スクロールバーなし) とオフセットを合計してドキュメントに相対的にし、pageX と比較しなかった理由がわかりません。私にとっては完璧に機能します。

于 2013-12-25T17:25:23.730 に答える
1

これにはラッパーdivを使用してください。私にとってはうまくいきます。

.selectable-wrapper {  border-radius: 5px; min-height: 200px;  max-height: 200px;  overflow-y: auto; border: 1px solid #D1D1D1;}

.selectable { list-style-type: none;padding: 5px;}
<div class="selectable-wrapper">
  <ul class="selectable">

  </ul>
</div>

于 2016-05-26T08:29:47.327 に答える