4

ここに私のコードスニペットがあります:

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

入力テキストフィールドをクリックしてドラッグすると、overflow:auto の場合と同様に、overflow:hidden スクロールで div が表示されます。divにoverflow:hiddenを設定すると、他のブラウザと同じようにスクロールがロックされます。

興味深いことに、入力フィールドに padding:0px を設定すると、Chrome での問題は発生しなくなりました。

Google Chrome のバグですか？Javascript を使用せずに動作させるための回避策はありますか?

編集: この動作は Safari 5 でも発生します。多分それはWebkitの問題です。

4

4 に答える 4

2

私もこれに遭遇しました。これまでのところ、私が最もうまく機能するようになったのは、を使用することpointer-events:none;です。それを適用できる唯一の方法は、display: none;. それ以外の場合は無視されたため、短い点滅があります。

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

var tx = document.getElementById('tx'),
    bod = document.body;

tx.addEventListener('mousedown', tx_ondown);

function tx_ondown() {
    bod.addEventListener('mousemove', b_onmove);
    bod.addEventListener('mouseup', b_onup);  
    bod.addEventListener('mouseout', b_onup);    
}

function b_onmove() {
    tx.style.pointerEvents = 'none';
    tx.style.display = 'none';

    setTimeout(function() {
        tx.style.display = '';
    }, 0);
    bod.removeEventListener('mousemove', b_onmove);
}

function b_onup() {
    if (tx.style.pointerEvents === 'none') {
        tx.style.pointerEvents = '';
    } else {
        bod.removeEventListener('mousemove', b_onmove);
    }
    bod.removeEventListener('mouseup', b_onup);
    bod.removeEventListener('mouseout', b_onup);        
}​
于 2012-12-16T00:11:15.340 に答える
0

JQueryを使用してtiffonのソリューションを試しましたが、複数のフィールドで動作させることができませんでした.pointer-eventsをnoneに設定した後、mouseupは起動しませんでした。

そのため、入力 'pointer-events' を none に設定すると、非表示のコンテンツにスクロールする問題は解決しますが、ユーザーがマウス イベントを使用してフィールドにフォーカスすることはできなくなります。しかし、ラベルをクリックしてもフィールドにフォーカスできることに気付きました。

そのため、すべてのフィールドが div 内にネストされているために機能するこの回避策を作成しました。基本的に、フィールドをクリックしてもフォーカスされませんが、イベントは親にバブルされます。

    $('label').click(function(e){
    e.stopPropagation();
});
$('input[type="text"], textarea').parent().click(function(){
    $(this).find('label').click();
});
$('input[type="text"], textarea').on({
    mousedown:function(){
        $(this).css('pointer-events', 'none');                  
    }
});

問題は、キーボードの矢印キーを使用しない限り、フィールド内のテキストを選択できないことです。

于 2013-02-08T14:11:20.963 に答える
0

「onscroll」イベントで scrollLeft および/または scrollTop を 0 に設定すると、スクロールが無効になります。

var div = $(".overflow-hidden");
div.scroll(function() { div.scrollTop(0).scrollLeft(0); });
于 2013-05-10T14:09:42.720 に答える