11

昨年からウェブキットブラウザだけで経験している奇妙な振る舞いがあり、それは私をイライラさせています。

これを検索してみましたが、この問題に関連するキーワードをヒットできないようです。

私は以下のようなhtml構造を持っています：

<div style="border: 1px solid #000; width:200px;height:200px; overflow:hidden;position:relative">
    <div style="width:200px;position:absolute">
        <p>long line</p>
        <p><input type="text" value=""/></p>
        <p>long line</p>
    </div>
</div>​

jdfiddleリンクのライブ例にアクセスできます： jsfiddle

私の場合、Chrome（18）を使用して、入力ボックスからテキスト入力フィールドのテキストをクリックしてドラッグ選択すると、CSSオーバーフローが非表示に設定されていても、親要素を「スクロール」できます。

選択をクリックして、フィドルから試してみることができます-右、上、下、左にドラッグします。作品は不思議です。

より複雑なhtml構造は、より奇妙なスクロール動作をもたらします。実際、ドラッグ選択するだけで、要素が順番にスライドインおよびスライドアウトするスライドショーアニメーションをほぼ実行できます。

幸い、この動作はFirefoxでは発生しません。

誰かがこの行動を経験していますか？これはWebkitの機能であると思われますか？この「スクロール」動作を無効にする方法を知っている人はいますか？

ありがとう！

編集：@PhilipKのおかげで、彼は以下に回答したjavascriptソリューションを含む関連する投稿を見つけました。私のウェブページはjavascriptで重いので、可能なCSSソリューションがあるかどうかを調べたいと思います。

edit2：@tiffonのおかげで、彼は別のjavascriptソリューションを見つけました。彼のソリューションはCSSで実装できます（ただし、マウスイベントにいくつかの制限があるため、CSSソリューションは不完全です）。

4

6 に答える 6

6

pointer-events: none;虐待は別のオプションかもしれないと思います：

重複した質問: https://stackoverflow.com/a/13897395/1888292

http://jsfiddle.net/7CuBV/21/

于 2012-12-16T00:16:00.473 に答える
4

これは私にとってはうまくいきました-ここonscrollを参照してください-基本的にイベントをリッスンし、両方scrollTopをscrollLeft0に設定します。

于 2012-04-05T22:51:15.490 に答える
2

私もこの問題を見つけました。少し実験した後overflow:hidden、親の1つ(スクロールしていdivた非常に外側)から を削除しましたが、解決したようです。div私はiframeを使用していませんでした。

于 2012-10-31T12:14:49.287 に答える
1

これは古いスレッドであることは知っていますが、同じ問題に直面したばかりです。

私はこの修正を作成しました：

// DISABLE INPUT DRAG SCROLL (CHROME BUG FIX)
var disableScrollDrag = false;
$('input, select, textarea').unbind('mousedown').mousedown(function(e) {
    disableScrollDrag = true;
    $(this).css('pointer-events', 'none').addClass('disable-scroll-drag');
});

$('body').mousemove(function() {
    if (disableScrollDrag === true) {
        $('.disable-scroll-drag').each(function () {
            $(this).css('pointer-events', 'auto');
        });
        disableScrollDrag = false;
    }
});
于 2013-05-25T15:32:56.420 に答える
0

上記にリンクされている例は基本的な考え方を示していますが、それは iframe に関するものであり、div 内のテキスト入力に実装するのは少し混乱する可能性があります。これは、私 (および元のポスター) が直面していたものです。

jqueryを使用して、私がやったことは次のとおりです。

$('body').on('select', '.my_text_input', function(e) {
        $('.div_that_was_moving_weirdly').scrollLeft(0);
         return false;
    });

選択が完了するまで選択イベントが開始されないように見えるため、不快なスクロールオーバーとジャンプバックが発生するため、これはまだ不完全です。色々イベントやってみたけど、これが精一杯。

于 2012-10-24T01:21:00.620 に答える
0

初めてこの奇妙なものと格闘しました。テキスト フィールドの幅をコンテナー以下に設定すると、親要素がテキスト入力値に対してスクロールしないことがわかりました。

于 2012-08-03T19:45:02.957 に答える