2

私は Jquery "ScrollTo" プラグインを使用しています: http://demos.flesler.com/jquery/scrollTo/は正常に動作しますが、Webkit ブラウザーに問題があります。入力をドラッグしてカーソルをコンテナー要素の外に移動すると (固定サイズとオーバーフロー: 非表示の css 属性があります)、次の例のような望ましくない動作でスクロールが移動します。

http://jsfiddle.net/H6PaC/53/

この投稿のように、この無効化マウスダウン イベントを修正できます: Disabling Drag Scroll for Text Inputs with JQuery with this code:

$("input").mousedown(function(event){
    $(event.target).focus();
    event.preventDefault();
});

しかし、入力内のテキストを選択するには、ドラッグ イベントを伝播する必要があります (この事実がエラーの原因です)。

また、入力に -webkit-user-drag: none を適用してみましたが、問題は解決しません。

同様の投稿を見つけましたが、この問題を解決するものはすべて、入力とテキストエリア内のテキスト選択を許可できれば満足できます。

PS 私の英語はあまり上手ではありません。明確に説明していただければ幸いです。ありがとうございました！

4

3 に答える 3

2

あなたはそれを試すことができます：

$("#scroll_link").click(function(){
  //disable guilty trigger, force scroll in viewport works
  window.guilty_trigger = false;
  $("div.viewport").scrollTo($("input.goal"),800);
});

$(".guilty").on('mousedown', function(e){
    window.guilty_trigger = true;
}).on('mouseup blur', function(e){
    window.guilty_trigger = false;
});

$(".viewport").on('scroll', function(e){
  //if guilty_trigger is true, viewport should keep your position
  if ( window.guilty_trigger ) {
    $("div.viewport").scrollTo($("input.guilty"));
    return false;
  }
});​

これがあなたのアップデートjsFiddleが機能しています...

** @JörnBerkefeldのコメントにより編集

chrome 27（Jörnが言ったように）以降、Chromeブラウザーは入力要素でスクロールイベントをトリガーするのを停止しました。そのため、目的の動作をシミュレートするには、このイベントをmousedownおよびmouseup+blurで変更する必要があります。

于 2012-06-12T18:38:41.087 に答える
1

必要最低限​​のソリューション：

$('.container').on('mousedown', 'input', function(e){
    $(e.target).focus();
    e.preventDefault();
});

ここをいじる。

これにより、スクロールが妨げられ、適切なテキストが選択されなくなります。もっと来る;）

于 2012-06-12T15:11:08.397 に答える
1

Webkit バグトラッカーでバグとして取り上げられているようです。

https://bugs.webkit.org/show_bug.cgi?id=114384

それを確認するには、より多くの人が必要です。

マウスイベントを防ぐことは最善の考えではないと思います。これをうまく止めることができた唯一の方法は、スクロールイベントで左スクロールと上スクロールを設定することです。画面が再描画されるときにわずかなジャークがありますが、これは入力フィールドでマウスイベントを無効にするよりも望ましいと思います。

$('body').on('scroll', '.ofhidden', function(e) {
    var $el = $(e.currentTarget);
    $el.scrollLeft(0);
    $el.scrollTop(0);
});
于 2013-07-14T03:00:26.417 に答える