Désactiver le défilement élastique dans Safari

Question

Je voulais juste désactiver l'effet de défilement/rebond élastique dans Safari (OSX Lion).

J'ai trouvé la solution pour définir overflow: hidden pour body dans css, mais comme prévu, il n'y a que des désactive la barre de défilement Ainsi, si le site web est plus long que l'écran sur lequel vous vous trouvez, vous pouvez le consulter. ne pourra pas défiler !

Toutes les solutions et tous les conseils sont les bienvenus ! Merci de votre compréhension.

Answer 1

Aucune des solutions de débordement n'a fonctionné pour moi. Je code un effet de parallaxe avec JavaScript en utilisant jQuery. Dans Chrome et Safari sur OSX, l'effet élastique/rubber-band perturbait mes chiffres de défilement, puisqu'il dépasse la hauteur du document et met à jour les variables de la fenêtre avec des chiffres hors limites. Ce que je devais faire, c'était vérifier si la quantité défilée était plus grande que la hauteur réelle du document, comme ceci :

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

Answer 2

Vous pourriez vérifier si les décalages de défilement sont dans les limites. Si c'est le cas, il faut les remettre en place.

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/

Answer 3

Il existe deux situations dans lesquelles les solutions CSS ci-dessus ne fonctionnent pas. Par exemple, un en-tête fixe transparent et un pied de page collant sur la même page. Pour éviter que le rebond du haut dans safari ne provoque des problèmes et des flashs sur les curseurs en plein écran, vous pouvez utiliser ceci.

    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;
            } 
        });

    }

Answer 4

Aucune des solutions ci-dessus n'a fonctionné pour moi, mais à la place, j'ai enveloppé mon contenu dans une div (#outer-wrap) et j'ai utilisé le CSS suivant :

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

Il est évident que cela ne fonctionne que dans les navigateurs qui prennent en charge les largeurs/hauteurs d'affichage.