当我尝试在一个作用域内使用多个滚动条时,会出现一些奇怪的问题。在我的代码中,“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 技巧?