我使用HTML固定定位和z-index操作创建了一个网站，无需任何Java脚本即可获得所需的效果。该页面在chrome上运行正常，但是在Firefox上我遇到了一个奇怪的问题。
这是MVCE：
<html style="height:100%;overflow-x:hidden">
<head></head>
<body style="padding:0;margin:0;height:100%;overflow-x:hidden">
<div style="height:100%;width:100%;background-color:#555"></div>
<div style="height:200px;width:100%;position:fixed;bottom:10%;background-color:#fff"></div>
<div style="height:1000px;width:100%;position:relative;background-color:#aaa"></div>
</body>
</html>
我最初是在设计此页面时遇到的：https://rgiant.com/
重现步骤：在firefox中，打开页面，然后在上下左右滑动鼠标滚轮的同时在屏幕上移动鼠标。当您将鼠标悬停在底部功能区上时，它会冻结滚动并阻止您进一步滚动。 MVCE的行为与原始网页并不完全相同，但是足够相似。区别在于，在原始网页上，一旦滚动卡住，无论将鼠标移到页面上的哪个位置，滚动都不会松动。在MVCE上，您可以将鼠标移离底部功能区，它将再次开始正常滚动。
我注意到取出overflow-x：hidden会影响它，但是由于某种原因，我在那里保留了该样式，我忘记了，但我认为这与调整移动图像的大小有关。