Scrollen funktioniert nicht auf Android Chrome nur

Für einige Grund, scrollen funktioniert nicht auf Android-Geräte im Chrome-browser nur.

Sehen Sie den Ort an Peshkuiarte.com/mobile

Habe ich versucht:

    $(document).ready(function() {
      $('body').css('touch-action', 'auto');
  });

Ich kann nicht scheinen, um es herauszufinden ... Jede Hilfe wäre sehr geschätzt

InformationsquelleAutor Shpat | 2014-10-28
  1. 3

    Durch scrollen meinst du ziehen die Seite mit dem finger am Handy?

    Du eingestellt hast -webkit-user-drag: none; als inline-Stil für den Körper, das könnte die Ursache sein.

    Es ist ein Webkit-spezifische Eigenschaft:

    CSS-Eigenschaft: -webkit-user-drag

    Beschreibung

    Gibt an, dass ein ganzes element ziehbar, statt dessen Inhalt.

    Syntax

    -webkit-user-drag: auto | element | none;

    Werte

    • auto Die Standard-Drag-Verhalten verwendet wird.

    • element Das gesamte element wird gezogen, statt dessen Inhalt.

    • none Das element kann nicht gezogen werden, auf allen.

    Unterstützt durch Chrom 1-17 und Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag

    • dies war es, den ich nicht verstehe, aber warum sind diese Eigenschaften überhaupt? Danke für Eure Hilfe
    InformationsquelleAutor red
  2. 4

    hatten wir dasselbe problem auf Chrome 40.0... und wir fest mit der css-Lösung. Vielleicht ist es nicht sauber, aber funktioniert für uns:

    @media screen and (max-width: 1024px) {
    html, body {
        z-index: 0 !important;
        overflow: scroll !important;
    }
}
    InformationsquelleAutor Gir . Cat
  3. 4

    In meinem Fall, die ich gefunden habe touch-action: none Hinzugefügt am body element.
    Entfernen Sie aktiviert das scrollen im android-chrome.

    Zusammenfassung

    Den touch-action CSS Eigenschaft gibt an, ob und in
    welche Möglichkeiten, einer bestimmten region kann manipuliert werden durch den Benutzer (für
    B. durch verschieben oder Zoomen).

    Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

    Hoffe, es hilft den Menschen im Umgang mit legacy code 🙂

    InformationsquelleAutor Atais
  4. 2

    e.preventDefault

    function handlerSwipe(e){
  e.preventDefault();
  if(handlerTouch){
    if(e.changedTouches[0].clientX>=110)
    toggle.checked=true;
    else toggle.checked=false;
  }
  return false;
  }
  window.addEventListener("touchmove", handlerSwipe, false);

    Dies war der code, den ich verwendet zum erstellen eines swipeable navigation Schublade, weil das scrollen nicht funktioniert .Nur das entfernen der e.preventDefault(); aus dem obigen code, der mein problem gelöst

    InformationsquelleAutor abytecoder
  5. 1

    Ich bin nicht wirklich sicher über die Frage, Sie sagen, "scrollen", aber die akzeptierte Antwort ist die Rede von den "drag". Also ich werde Euch geben, was ich denke, Sie Fragen (die nicht in der Lage, um zu Blättern innerhalb eines Bereichs auf ein mobile).

    Die einfachste Lösung ist ein CSS-eher als ein JS ein. Wenn Sie haben einen Bereich auf Ihrer Seite, müssen Sie scrollen, zum Beispiel einen code-block auf einem tech-blog können Sie festlegen, position, bezogen auf die Fläche und haben overflow-x auto. Auf den Körper, werden Sie brauchen, um es sich nicht bewegen, wenn Sie den Bildschirm berühren.

    pre {
    white-space: pre-wrap;
    overflow-y: auto;
    position: relative;
    }

    html,body{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }

    Sie können sehen, diese Lösung funktioniert auf meinem blog, wenn Sie Blick auf den code-snippet Abschnitte und versuchen Sie, und Blättern Sie über chrome mobile.(http://fullstack.life/mapping_arrays.html)

    InformationsquelleAutor fullstacklife
  6. 1

    pointer-events

    Stieß ich auf ein weiteres Problem heute und ich werde diese hier zur Referenz. Wenn Sie das element mit der overflow-y: scroll; setzt seine pointer-events: none; oder erbt, dann ist es auch nicht funktionieren. Auf dieser Ebene, Mauszeiger-events müssen wieder aktiviert werden mit:

    pointer-events: auto;
    InformationsquelleAutor nils
  7. 1

    Hier ist die Lösung für dieses Problem, das für mich gearbeitet.

    Beim Aufruf der niceScroll Funktion $("body").niceScroll(); im javascript-Klasse, es scheint das hinzufügen von inline-Formatvorlagen von: overflow-y: visible auf Ihren Körper-element (weil es inline, überschreibt Sie alle vorherigen overflow: hidden dass Sie geschrieben haben könnte, in der css-Datei.

    Fügen Sie einfach overflow: hidden ! important im css Ihrer Körper element.

    Stellen Sie außerdem sicher, dass Ihre html element hat Stil 

    overflow: hidden;
touch-action: none;
    InformationsquelleAutor Nma Okafor
Schreibe einen Kommentar