Question

这是极其简单的HTML页面

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

此页面的预期行为是：由于overflow-y: hidden，阻止了文档的滚动。

除了Safari以外，它都能按预期工作（防止滚动）。

实时演示：https://spotted-chime.glitch.me/

问题是：如何使Safari的行为与其他浏览器相同？

Answer 1

尝试一下：

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

Answer 2

只需使用overflow: hidden，它将起作用。

或者，您也可以尝试在position: fixed标签上使用<body>。

（注意：使用这种方法，body将滚动到顶部，默认情况下是top: 0。）

编辑：对于safari移动设备，您需要使用Javascript事件。在这个答案中解释。

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

Answer 3

固定位置的目的是创建一个div，使其在屏幕上向下滚动时保持在屏幕上的相同位置。

fixed

该元素已从常规文档流中删除，并且没有   在页面布局中为元素创建空间。它被定位   相对于视口建立的初始包含块，   除非其祖先之一具有变形，视角或   过滤器属性设置为无（参见CSS）   变换规格），在这种情况下，祖先的行为就像   包含块。（请注意，浏览器与   透视图和过滤器有助于形成积木。）   其最终位置取决于上，下，右，   走了。

此值始终创建一个新的堆栈上下文。在印刷   文档中，该元素在每页上都放置在同一位置。

您是否尝试过将其更改为绝对值？

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>

Answer 4

只需使用“位置：相对”或固定即可解决问题

Answer 5

实际上，这是Safari团队所缺少的，但是要解决您的问题，可以使用JavaScript解决方案：

对于台式机浏览器，您可以使用overflow: hidden，但对于iOS Safari，您应该首先检测到它，然后使用JavaScript函数来防止滚动：

const preventDefault = (e) => {
  e = e || window.event;
  if (e.preventDefault) {
    e.preventDefault();
  }
  e.returnValue = false;  
}

const preventScrollingSafari = () => {
  const ua = navigator.userAgent.toLowerCase(); 
  if (ua.indexOf('safari') != -1 && ua.indexOf('chrome') <= -1) {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', preventDefault, false);
    }
    window.onwheel = preventDefault;
    window.onmousewheel = document.onmousewheel = preventDefault;
    window.ontouchmove  = preventDefault;
  }
};

和重新启用它的功能：

const enableScrollingSafari = () => {
  const ua = navigator.userAgent.toLowerCase(); 
  if (ua.indexOf('safari') != -1 && ua.indexOf('chrome') <= -1) {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', preventDefault, false);
    }
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;
  }
};

您可以在操作中使用上述功能。

Safari不会阻止滚动

5 个答案: