wake-up-neo.net

Safari verhindert nicht das Scrollen von <body style = "overflow-y: hidden">

Hier ist die extrem einfache HTML-Seite

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

Das erwartete Verhalten dieser Seite ist: Das Scrollen eines Dokuments wird aufgrund von overflow-y: hidden verhindert.

Es funktioniert wie erwartet (Scrollen wird verhindert) überall außer Safari.

Live Demo: https://spotted-chime.glitch.me/


Die Frage ist: Wie lässt sich Safari wie andere Browser verhalten?

5
Limon Monte

Verwenden Sie einfach overflow: hidden und es wird funktionieren.

Alternativ können Sie auch position: fixed für das <body>-Tag verwenden. 

(HINWEIS: Bei dieser Methode wird die Variable body standardmäßig nach oben verschoben, wobei der Code top: 0 angezeigt wird.)

BEARBEITEN: Für mobile Safari-Geräte müssen Sie Javascript-Ereignisse verwenden. In dieser Antwort erklärt.

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

1
Rahul Gandhi

Versuche dies:

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

Position fixiert bedeutet, dass ein Div erstellt wird, das an der gleichen Position auf dem Bildschirm bleibt, während der Inhalt dahinter nach unten gescrollt wird.

Fest 

Das Element wird aus dem normalen Dokumentenfluss entfernt und nein Im Seitenlayout wird Platz für das Element geschaffen. Es ist positioniert relativ zu dem anfänglichen enthaltenden Block, der vom Viewport festgelegt wurde, es sei denn, einer seiner Vorfahren hat eine Transformation, eine Perspektive oder filter -Eigenschaft, die auf einen anderen Wert als none festgelegt ist (siehe CSS Transforms Spec). In diesem Fall verhält sich der Vorgänger als Block enthalten. (Beachten Sie, dass es Browserinkonsistenzen mit der Perspektive "__." Und dem Filter gibt, der zur Blockbildung beiträgt.) Seine Endposition wird durch die Werte von oben, rechts, unten, .__ bestimmt. und links. 

Dieser Wert erstellt immer einen neuen Stapelkontext. Gedruckt Bei Dokumenten wird das Element auf jeder Seite an derselben Position platziert.

Haben Sie versucht, es in absolut zu ändern?

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