Overflow hidden und text eingeben scrollen in Google Chrome

Hier ist mein code-snippet:

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

Wenn ich klicken und ziehen Sie über die Eingabe von text-Bereich, ich bekomme das div mit overflow:hidden scrollen, wie es würde tun mit overflow:auto. Wenn ich overflow:hidden auf einen div möchte ich das scrollen gesperrt werden als andere Browser.

Das merkwürdige ist, wenn ich padding:0px in das Eingabefeld, das Problem in Chrome nicht mehr auftreten.

Ist es ein Google-Chrome-bug? Jeder workaround, damit es funktioniert ohne den Einsatz von Javascript?

EDIT: Dieses Verhalten passiert auf Safari 5 auch. Vielleicht ist es ein Webkit-Problem.

  • Gleiche Problem hier, mit der Ausnahme, dass der workaround bei mir nicht funktioniert. 🙁
InformationsquelleAutor fuegod | 2012-06-05
  1. 4

    Hier ist, was fixiert es für mich:

    input:active { pointer-events:none; }

    Dank https://stackoverflow.com/users/498031/vken für den Hinweis zu dieser ähnlichen Frage: Problem mit klicken-ziehen-wählen Sie im Texteingabe-Feld auch Schriftrollen übergeordneten element webkit-bug oder feature?

    UPDATE 2013-11:
    pointer-events:none wird das Problem behoben, kommt aber mit zahlreichen Nachteilen. Beste Abhilfe für das Problem ist eigentlich, um sicherzustellen, dass Sie haben keine überquellenden Inhalt wie in "der Inhalt der overflow:hidden container nicht größer als Sprach-container. Wenn Sie wollen Blättern Inhalt in der via JavaScript, geben Sie Breite&height=0, solange Sie verborgen ist und die Größe nur rechts, bevor Sie es in (leicht getan mit keyframe-Animationen oder zeitgesteuerte überblendungen)

    WICHTIG: ich traf eine seltsame Fall mit einer angepassten <input type=file> Feld in Chrom, die nicht verursacht haben keine überlauf-Probleme als ich geändert es per CSS - dev-tools bestätigt, ABER: Nach einem Blick auf die Shadow-DOM erkannte ich, dass Chrome die eigenen "Knöpfe" traten die eigentliche input-Feld, und daher verursacht der gesamte Behälter größer werden.

    Wie um zu zeigen, Shadow-DOM: Wenn die Dinge richtig Aussehen, und es ist immer noch ein Problem, gehen Sie zu Google Chrome Dev-Tools, klicken Sie auf die Einstellungen-Schaltfläche in der unteren rechten Ecke. Auf der "allgemein"-Reiter in der Sektion "Elements" ist die option "Show Shadow DOM". Dadurch erhalten Sie das gesamte Bild von dem, was Los ist... Obwohl die meisten der Zeit, es fügt nur eine weitere Schicht der Komplexität, hier ist es wirklich hilfreich!

    • Vielen Dank. Das ist genau das was ich gebraucht habe 😉
    • Wow, das ist großartig!
    • Leider kann der Benutzer nicht mehr scrollen durch markieren mit der Maus mit dieser Lösung. Plus, es hat andere Auswirkungen, wenn es um das hören für Veranstaltungen in JS. Bitte siehe meine Antwort für eine stabilere Lösung.
    • es hat seine Nachteile - ich geben Sie dass! aber dein Beispiel ist ein wenig off-topic, da Sie nicht über eine INPUT Feld
    • Ich habe meinen Beitrag aktualisiert mit meine neueste Schlussfolgerungen 😉
    • So Leid es mir tut! Ich dachte, ich war posting zu einem anderen thread. Mein Fehler.

    InformationsquelleAutor Jörn Berkefeld
  2. 2

    Ich lief in dieses, auch. So weit, die Sache, die ich bekommen habe, zu arbeiten das beste ist, mit pointer-events:none;. Der einzige Weg, ich könnte es angewandt wurde, um die display: none;. Ansonsten wurde es ignoriert, so gibt es eine kurze blinken.

    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);        
}​
    • Ich mag Ihre Lösung.
    • Dank
    InformationsquelleAutor tiffon
  3. 0

    Versuchte ich tiffon Lösung mit JQuery, aber konnte es nicht zu funktionieren mit mehreren Feldern, mouseup würde nicht das Feuer, nachdem ich mich gesetzt hatte, pointer-events none.

    So, festlegen der Eingabe "pointer-events" zu keiner löst das problem des scrollen in die verborgenen Inhalte, aber es verhindert, dass der Benutzer konzentriert sich das Feld mit der Maus Ereignisse.
    Aber ich merkte, dass Sie auf das label wäre immer noch Arbeit zu konzentrieren den Bereich.

    Also machte ich diese Problemumgehung funktioniert, denn alle meine Felder sind in verschachtelten innen div ist. Im Grunde Klick auf das Feld nicht den Fokus, aber noch sprudelt das Ereignis für Eltern:

        $('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');                  
    }
});

    Problem ist, es lässt Sie nicht wählen Sie den text in das Feld, es sei denn, Sie verwenden die Pfeiltasten auf der Tastatur.

    InformationsquelleAutor erik
  4. 0

    Set scrollLeft und/oder scrollTop 0 in der "onscroll" - Ereignis deaktiviert das scrollen:

    var div = $(".overflow-hidden");
div.scroll(function() { div.scrollTop(0).scrollLeft(0); });
    InformationsquelleAutor Sergey
Schreibe einen Kommentar