当我尝试在一个作用域内使用多个滚动条时，会出现一些奇怪的问题。在我的代码中，“pageContainer”的ID与“scrollfield”同义，“contentWrap”的ID与下面解释中的“subscrollfield”同义。
需要澄清的是，这里有两个问题：
- 第一个问题涉及滚动功能。只有Firefox浏览器遇到此问题，并且在相应部分中进行了描述。只能在Firefox中进行测试。
- 第二个问题涉及如何添加自定义属性。目前可在Chrome中测试，在解决Firefox的第一个问题后，也将可以在Firefox中进行测试。
问题1（针对PC上的Firefox）：
--当您在滚动字段内的子滚动字段中滚动时，必须先移动鼠标才能让客户端知道您要在子滚动字段中滚动；否则，它将假定您想要在主滚动字段中滚动，而不管您的鼠标如何悬停在子滚动字段上。换句话说，我希望您悬停在哪个滚动字段上，哪个滚动字段就滚动。
--测试方式：滚动到代码段底部，然后滚动到顶部。执行此操作时，请勿在起始位置后移动鼠标！这将显示问题-即子滚动字段没有滚动，即使鼠标悬停在其div上也是如此。
一旦Firefox的问题得到解决，它将遇到Chrome遇到的问题：
问题2（针对PC上的Chrome或Mac上的任何浏览器）：
--当您在滚动字段内的子滚动字段中滚动时，它会按预期工作，但我希望如果您位于页脚并悬停在子滚动字段上，则从页脚向上滚动，然后在子字段中向上滚动，最后在主字段中向上滚动。换句话说，如果您在滚动回来时光标在子滚动字段上，则不要让页脚保留在页面底部。
--测试方式：在屏幕中间保持光标不动，滚动到滚动代码段底部，然后向上滚动。您会发现子滚动字段首先向上滚动（使页脚保持在底部），然后滚动字段向上滚动。如何使相反的情况发生？
以下是我的网站的伪代码：
body {
overflow-y: hidden;
}
#pageContainer {
overflow-y: scroll;
height: 100vh;
scroll-snap-type: y mandatory;
}
.snapPoint {
position: relative;
scroll-snap-align: start none;
}
#prelude {
height: 100vh;
overflow: hidden;
background-color: #000020;
}
#header {
width: 100vw;
height: 9.75vh;
z-index: 3;
background: linear-gradient(to top, #167988 0%, #1590A3 20%, #1DB3CA 100%);
overflow: hidden;
}
#contentWrap {
overflow-y: scroll;
font-size: 4vw;
padding: 5vh 0 0;
height: 85.25vh;
text-align: center;
background: linear-gradient(#C3C3C3 0%, #F4F4F4 12vh, #F4F4F4 calc(100% - 15vh), #C3C3C3 100%);
}
#footer {
background: linear-gradient(to top, #167988 0%, #1590A3 20%, #1DB3CA 100%);
height: 10vw;
width: 100vw;
z-index: 3;
overflow: hidden;
}<body>
<div id="pageContainer"><!--THIS CONTAINS THE MAIN SCROLL SCOPE (WITH SNAP)-->
<div id="prelude" class="snapPoint"><h1 style = "color: #F4F4F4;">PRELUDE</h1></div>
<div id="header" class="snapPoint"></div>
<div id="contentWrap"><!--THIS CONTAINS THE SUB-SCROLL SCOPE-->
<p>Test One<br/><br/><br/>Test Two<br/><br/><br/>Test Three<br/><br/><br/>Test Four</p>
</div>
<div id="footer" class="snapPoint"></div>
</div>
</body>我该如何解决这个问题？我能写 JavaScript 修复这个问题吗，还是有一些我没有考虑到的 CSS 技巧？