web-dev-qa-db-fra.com

Safari n'empêche pas le défilement de <body style = "overflow-y: hidden">

Voici la page HTML extrêmement simple

<body style="overflow-y: hidden">
  ...
</body>

Le comportement attendu de cette page est le suivant: le défilement d'un document est empêché en raison de overflow-y: hidden.

Cela fonctionne comme prévu (le défilement est empêché) partout sauf dans Safari.

Démonstration en direct: https://spotted-chime.glitch.me/

La question qui se pose est la suivante: comment faire en sorte que Safari se comporte de la même manière que les autres navigateurs?

cssscrollsafarioverflowmobile-safari
5
Limon Monte

Il suffit d'utiliser overflow: hidden et cela fonctionnera.

Sinon, vous pouvez également utiliser position: fixed sur la balise <body>. 

(REMARQUE: avec cette approche, la body défilera vers le haut comme par défaut le top: 0.)

EDIT: Pour les appareils mobiles Safari, vous devez utiliser les événements Javascript. Expliqué dans cette réponse.

https://stackoverflow.com/a/4770179/2860486

1
Rahul Gandhi

Essaye ça:

  <head>
    <style>
       .forSafari::-webkit-scrollbar { width: 0 !important }
    </style>
   </head>
   <body style="overflow-y: hidden" class="forSafari">
         ...
  </body>
1
Mohan

La position fixe est destinée à créer une div qui reste dans la même position sur l'écran pendant que le contenu derrière elle défile vers le bas.

corrigé 

L'élément est supprimé du flux de documents normal et no un espace est créé pour l'élément dans la mise en page. Il est positionné par rapport au bloc contenant initial établi par la fenêtre d'affichage, sauf lorsque l'un de ses ancêtres a une transformation, une perspective ou La propriété filter est définie sur autre chose que none (voir CSS Transforms Spec), auquel cas cet ancêtre se comporte comme le bloc contenant. (Notez qu'il existe des incohérences de navigateur avec Perspective et un filtre contribuant à contenir la formation de blocs.) Sa position finale est déterminée par les valeurs top, right, bottom, et gauche. 

Cette valeur crée toujours un nouveau contexte d'empilement. En imprimé documents, l'élément est placé à la même position sur chaque page.

Avez-vous essayé de le changer en absolu?

body {
  overflow-y: hidden;
}

#backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .2);
  border: 5px dashed black;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

  </head>  
  <body>
    <div id="backdrop">
      
    </div>  
    <div>0%</div>
    <div>1%</div>
    <div>2%</div>
    <div>3%</div>
    <div>4%</div>
    <div>5%</div>
    <div>6%</div>
    <div>7%</div>
    <div>8%</div>
    <div>9%</div>
    <div>10%</div>
    <div>11%</div>
    <div>12%</div>
    <div>13%</div>
    <div>14%</div>
    <div>15%</div>
    <div>16%</div>
    <div>17%</div>
    <div>18%</div>
    <div>19%</div>
    <div>20%</div>
    <div>21%</div>
    <div>22%</div>
    <div>23%</div>
    <div>24%</div>
    <div>25%</div>
    <div>26%</div>
    <div>27%</div>
    <div>28%</div>
    <div>29%</div>
    <div>30%</div>
    <div>31%</div>
    <div>32%</div>
    <div>33%</div>
    <div>34%</div>
    <div>35%</div>
    <div>36%</div>
    <div>37%</div>
    <div>38%</div>
    <div>39%</div>
    <div>40%</div>
    <div>41%</div>
    <div>42%</div>
    <div>43%</div>
    <div>44%</div>
    <div>45%</div>
    <div>46%</div>
    <div>47%</div>
    <div>48%</div>
    <div>49%</div>
    <div>50%</div>
    <div>51%</div>
    <div>52%</div>
    <div>53%</div>
    <div>54%</div>
    <div>55%</div>
    <div>56%</div>
    <div>57%</div>
    <div>58%</div>
    <div>59%</div>
    <div>60%</div>
    <div>61%</div>
    <div>62%</div>
    <div>63%</div>
    <div>64%</div>
    <div>65%</div>
    <div>66%</div>
    <div>67%</div>
    <div>68%</div>
    <div>69%</div>
    <div>70%</div>
    <div>71%</div>
    <div>72%</div>
    <div>73%</div>
    <div>74%</div>
    <div>75%</div>
    <div>76%</div>
    <div>77%</div>
    <div>78%</div>
    <div>79%</div>
    <div>80%</div>
    <div>81%</div>
    <div>82%</div>
    <div>83%</div>
    <div>84%</div>
    <div>85%</div>
    <div>86%</div>
    <div>87%</div>
    <div>88%</div>
    <div>89%</div>
    <div>90%</div>
    <div>91%</div>
    <div>92%</div>
    <div>93%</div>
    <div>94%</div>
    <div>95%</div>
    <div>96%</div>
    <div>97%</div>
    <div>98%</div>
    <div>99%</div>
    <div>100%</div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

0
Yvonne Aburrow