wake-up-neo.com

Deaktivieren Sie das elastische Scrollen in Safari

Ich wollte nur den elastischen Scroll-/Bounce-Effekt deaktivieren in Safari (OSX Lion).

Ich habe die Lösung gefunden, um overflow: hidden für body in css, aber wie erwartet nur deaktiviert die Bildlaufleiste, wenn die Website also "länger" ist als der Bildschirm, können Sie nicht scrollen!

Beliebige Lösungen oder Hinweise sind willkommen! Vielen Dank!

42

Sie können dies universeller erreichen, indem Sie das folgende CSS anwenden:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

Dies ermöglicht es Ihrem Inhalt, innerhalb von body scrollbar zu werden, aber beachten Sie, dass der Scroll-Kontext, in dem das scroll -Ereignis ausgelöst wird, jetzt document.body, nicht window.

57
Aintaer

Wenn Sie den Hack overflow:hidden für das Element <body> verwenden, um das normale Bildlaufverhalten wiederherzustellen, können Sie ein <div> absolut innerhalb des Elements positionieren, um einen Bildlauf zurückzusetzen mit overflow:auto. Ich denke, dies ist die beste Option und es ist ziemlich einfach, sie nur mit CSS zu implementieren!

Oder Sie können es mit jQuery versuchen:

$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);

Dasselbe in javasrcipt:

document.addEventListener(
'touchmove',
function(e) {
e.preventDefault();
},
false
);

Letzte Option, aktivieren Sie ipad safari: Scrolling deaktivieren und Bounce-Effekt?

14
Yisela

overflow:hidden;-webkit-overflow-scrolling:touch Funktioniert unter iOS 8.1 nicht gut, da der feste Header außerhalb des sichtbaren Bereichs liegt.

gif

Wie @ Yisela sagt, sollte das CSS auf .container (Das <div> Unter <body>) Platziert werden. das scheint kein Problem zu sein (zumindest auf Safari iOS 8.1)

gif

Ich habe die Demo auf meinem Blog platziert: http://tech.colla.me/en/show/disable_elastic_scroll_on_iOS_safari

11
sunderls

Ich hatte es auf dem iPad gelöst. Versuchen Sie, ob es auch unter OSX funktioniert.

body, html { position: fixed; }

Funktioniert nur, wenn Sie Inhalte haben, die kleiner als der Bildschirm sind, oder wenn Sie ein Layout-Framework verwenden (in meinem Fall Angular Material).

In Angular Material ist es großartig, dass Sie den Over-Scroll-Effekt für die gesamte Seite deaktivieren, aber innere Abschnitte <md-content> kann noch scrollbar sein.

10
Martin

Ich habe eine Erweiterung erstellt, um sie auf allen Websites zu deaktivieren. Dabei habe ich drei Techniken angewendet: reines CSS, reines JS und Hybrid.

Die CSS-Version ähnelt den obigen Lösungen. Der JS geht ein bisschen so:

var scroll = function(e) {
    // compute state
    if (stopScrollX || stopScrollY) {
        e.preventDefault();              // this one is the key
        e.stopPropagation();
        window.scroll(scrollToX, scrollToY);
    }
}

document.addEventListener('mousewheel', scroll, false);

Das CSS funktioniert, wenn man position: fixed Elemente verwendet und den Browser das Scrollen überlässt. Der JS wird benötigt, wenn ein anderer JS vom Fenster abhängt (z. B. Ereignisse), das vom vorherigen CSS blockiert wird (da der Body anstelle des Fensters gescrollt wird) und die Ereignisausbreitung an den Rändern stoppt, dies jedoch benötigt das Scrollen der Nicht-Edge-Komponente zu synthetisieren; Der Nachteil ist, dass einige Arten von Bildlauf verhindert werden (diese funktionieren mit der CSS-Version). Die hybride Variante versucht, einen gemischten Ansatz zu verfolgen, indem sie den gerichteten Überlauf (CSS) selektiv deaktiviert, wenn das Scrollen eine Kante (JS) erreicht. Theoretisch könnte dies in beiden Fällen funktionieren, ist aber derzeit noch nicht der Fall, da sie einen gewissen Spielraum am Limit hat.

Abhängig von den Implementierungen einer Website muss man also entweder den einen oder den anderen Ansatz wählen.

Sehen Sie hier, wenn man mehr Details möchte: https://github.com/lloeki/unelastic

5
Lloeki

Sie können überprüfen, ob die Scroll-Offsets innerhalb der Grenzen liegen. Wenn sie darüber hinausgehen, setzen Sie sie zurück.

var scrollX = 0;
var scrollY = 0;
var scrollMinX = 0;
var scrollMinY = 0;
var scrollMaxX = document.body.scrollWidth - window.innerWidth;
var scrollMaxY = document.body.scrollHeight - window.innerHeight;

// make sure that we work with the correct dimensions
window.addEventListener('resize', function () {
  scrollMaxX = document.body.scrollWidth - window.innerWidth;
  scrollMaxY = document.body.scrollHeight - window.innerHeight;
}, false);

// where the magic happens
window.addEventListener('scroll', function () {
  scrollX = window.scrollX;
  scrollY = window.scrollY;

  if (scrollX <= scrollMinX) scrollTo(scrollMinX, window.scrollY);
  if (scrollX >= scrollMaxX) scrollTo(scrollMaxX, window.scrollY);

  if (scrollY <= scrollMinY) scrollTo(window.scrollX, scrollMinY);
  if (scrollY >= scrollMaxY) scrollTo(window.scrollX, scrollMaxY);
}, false);

http://jsfiddle.net/yckart/3YnUM/

3
yckart

Keine der "Überlauf" -Lösungen hat bei mir funktioniert. Ich programmiere einen Parallaxeneffekt mit JavaScript unter Verwendung von jQuery. In Chrome und Safari unter OSX hat der Gummiband-Effekt meine Bildlaufnummern durcheinander gebracht, da er tatsächlich über die Dokumenthöhe hinausgeht und die Fenstervariablen mit außerhalb der Grenzen liegenden Zahlen aktualisiert. Was ich tun musste, war zu überprüfen, ob der gescrollte Betrag größer als die tatsächliche Höhe des Dokuments war, wie folgt:

$(window).scroll(
    function() {
        if ($(window).scrollTop() + $(window).height() > $(document).height()) return;
        updateScroll(); // my own function to do my parallaxing stuff
    }
);
3
Gavin

Keine der oben genannten Lösungen hat für mich funktioniert. Stattdessen habe ich meinen Inhalt in ein div (# outer-wrap) eingeschlossen und dann das folgende CSS verwendet:

body {
   overflow: hidden;
}
#outer-wrap {
    -webkit-overflow-scrolling: touch;
     height: 100vh;
     overflow: auto;
}

Funktioniert natürlich nur in Browsern, die Breite/Höhe von Ansichtsfenstern unterstützen.

2
Owen Davey

Es gibt Situationen, in denen die oben genannten CSS-Lösungen nicht funktionieren. Zum Beispiel eine transparente feste Kopfzeile und eine klebrige Fußzeile auf derselben Seite. Verwenden Sie diese Option, um zu verhindern, dass bei Safari-Dingen die Spitze abprallt und bei Vollbild-Schiebereglern Blitze verursacht.

    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {

        $window.bind('mousewheel', function(e) {

            if (e.originalEvent.wheelDelta / 120 > 0) {

                if ($window.scrollTop() < 2) return false;
            } 
        });

    }
1
Kieran