Lim*_*nte 6 css safari scroll overflow mobile-safari
这是非常简单的HTML页面
<body style="overflow-y: hidden">
...
</body>
此页面的预期行为是:由于阻止了文档的滚动overflow-y: hidden.
除了Safari之外,它可以按预期工作(阻止滚动).
现场演示:https://spotted-chime.glitch.me/
问题是:如何使Safari的行为与其他浏览器相同？
位置固定意味着创建一个 div，当其后面的内容向下滚动时，该 div 保持在屏幕上的相同位置。
该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建空间。它相对于视口建立的初始包含块进行定位，除非它的祖先之一将变换、透视或过滤器属性设置为除“无”之外的其他属性（请参阅 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>| 归档时间： |
|
| 查看次数： |
2068 次 |
| 最近记录： |