web-dev-qa-db-fra.com

Débordement de mobile: défilement et défilement de débordement: touchez // empêcher le "rebond" de la fenêtre

Sur un mobile (safari, vues Web, où que vous soyez), overflow:scroll et overflow-scrolling: touch donnent un défilement assez lisse, ce qui est cool.

Mais cela rend la page "bounce" (zone encerclée ci-dessous), ce qui n’est pas le cas lorsque vous ne l’utilisez pas, mais rend l’expérience un peu moins "native" (et plus simplement, dans la mesure où je peux avoir une opinion à ce sujet, est absolument inutile)

Y at-il un moyen d’empêcher que cela se produise? Merci beaucoup pour votre aide/conseils/réponses

that kind of suxx

mobile-safarioverflowviewport
25
Ben

J'ai réussi à trouver une solution de contournement CSS pour empêcher le rebond de la fenêtre d'affichage. La clé consistait à envelopper le contenu dans 3 divs avec -webkit-touch-overflow: le défilement qui leur était appliqué. La dernière division devrait avoir une hauteur minimale de 101%. De plus, vous devez explicitement définir des largeurs/hauteurs fixes sur la balise body représentant la taille de votre appareil. J'ai ajouté un fond rouge sur le corps pour démontrer que c'est le contenu qui rebondit et non la fenêtre de safari mobile.

Le code source ci-dessous et voici un plunker (cela a été testé sur iOS7 GM aussi). http://embed.plnkr.co/NCOFoY/preview

Si vous avez l'intention de l'exécuter en tant qu'application plein écran sur l'iPhone 5, modifiez la hauteur à 1136px (lorsque le style de barre d'état Apple-mobile-web-app-statut est défini sur 'noir-translucent' ou 1096px lorsqu'il est défini sur noir'). 920x est la hauteur de la fenêtre une fois que le chrome du safari mobile a été pris en compte).

<!doctype html>
<html>

<head>
    <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" />
    <style>
        body { width: 640px; height: 920px; overflow: hidden; margin: 0; padding: 0; background: red; }
        .no-bounce { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
        .no-bounce > div { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
        .no-bounce > div > div { width: 100%; min-height: 101%; font-size: 30px; }
        p { display: block; height: 50px; }
    </style>
</head>

<body>

    <div class="no-bounce">
        <div>
            <div>
                <h1>Some title</h1>
                <p>item 1</p>
                <p>item 2</p>
                <p>item 3</p>
                <p>item 4</p>
                <p>item 5</p>
                <p>item 6</p>
                <p>item 7</p>
                <p>item 8</p>
                <p>item 9</p>
                <p>item 10</p>
                <p>item 11</p>
                <p>item 12</p>
                <p>item 13</p>
                <p>item 14</p>
                <p>item 15</p>
                <p>item 16</p>
                <p>item 17</p>
                <p>item 18</p>
                <p>item 19</p>
                <p>item 20</p>
            </div>
        </div>
    </div>

</body>

</html>
8
romiem

Il y a un bon article sur ce blog ici:

http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Avec une démo ici:

http://www.kylejlarson.com/files/iosdemo/

En résumé, vous pouvez utiliser ce qui suit sur une div contenant votre contenu principal:

.scrollable {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Le problème que je pense que vous décrivez, c’est lorsque vous essayez de faire défiler vers le haut une div qui est déjà en haut - elle fait ensuite défiler la page au lieu de la div et provoque un effet de rebond en haut de la page. Je pense que votre question demande comment se débarrasser de cela?

Pour résoudre ce problème, l'auteur vous suggère d'utiliser ScrollFix pour augmenter automatiquement la hauteur des div à défilement.

Il convient également de noter que vous pouvez utiliser les éléments suivants pour empêcher l'utilisateur de faire défiler l'écran, par exemple. dans un élément de navigation:

document.addEventListener('touchmove', function(event) {
   if(event.target.parentNode.className.indexOf('noBounce') != -1 
|| event.target.className.indexOf('noBounce') != -1 ) {
    event.preventDefault(); }
}, false);

Malheureusement, certains problèmes persistent avec ScrollFix (par exemple, lors de l'utilisation de champs de formulaire), mais la liste des problèmes sur ScrollFix est un bon endroit pour rechercher des alternatives. Certaines approches alternatives sont discutées dans cette question .

D'autres alternatives, également mentionnées dans l'article de blog, sont Possibilité de défilement et iScroll

19
Alasdair McLeay

tu pourrais essayer

$('*').not('#div').bind('touchmove', false);

ajoutez ceci si nécessaire

$('#div').bind('touchmove');

notez que tout est corrigé sauf #div

1
Tarik L
body {
  position: fixed;
  height: 100%;
}
0
user3941146