对于大于100vh的部分，CSS translateY断断续续

Question

我正在尝试创建一个；向上滑动淡出"；使用CSS&Javascript作为分页库的替代。当部分限制为100vh时，该代码运行良好。但是，如果任何部分的高度超过100vh，并且滚动到底部，translateY转换就会断断续续。

我知道发生这种情况是因为相对于正文的部分高度发生了变化，滚动条减少，内容调整回底部，这导致了断断续续。但我希望我能在这里俯瞰一些东西。

$('body')
.on('mousewheel',async function(e){
if( transitioning ) return false
let cS = $('section.active'),
nS = $(cS).next('section'),
pS = $(cS).prev('section');

if( e.originalEvent.deltaY > 0 && nS.length && ($(window).scrollTop() + $(window).height() >= $(document).height()) ){
setScrollLevel(1);
transitioning = true;
$('body').css({ 'overflow-y':'hidden' });
await new Promise( r => setTimeout(r,100) );
$(cS).css({ 'transform': 'translateY(-100%)' });
await new Promise( r => setTimeout(r,750) );
$(cS).removeClass('active');
$(nS).addClass('active');
$('body').css({ 'overflow-y':'' })
transitioning = false;
}
if( e.originalEvent.deltaY < 0 && pS.length && $(window).scrollTop() <= 0 ){
setScrollLevel(-1);
transitioning = true;
$('body').css({ 'overflow-y':'hidden' })
$(cS).removeClass('active');
$(pS).addClass('active');
await new Promise( r => setTimeout(r,100) );
$(pS).css({ 'transform':'translateY(0)' });
await new Promise( r => setTimeout(r,750) );
$('body').css({ 'overflow-y':'' })
transitioning = false;
}
})

section{
position: absolute;
contain: content;
height: 100vh;
width: 100vw;
min-height: 100vh;
background: none;
transition: transform ease-in-out .75s,
opacity ease-in-out .75s;
overflow-y: hidden;
display: flex;
opacity: 0
}
section.active{
overflow-y: auto;
height: auto;
opacity: 1;
}
section > *:last-of-type {
margin-bottom: 4vh;
}
section > *:first-of-type {
margin-top: 8vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这个网站是我试图复制的。

Answer 1

我意识到让它工作的唯一方法是保持截面的高度不变。因此，我没有对section元素进行高度/滚动的更改，而是在其内部添加了一个""div""，高度的更改保持了部分高度不变。

在结构为之前

<section> <!-- the height of this changed when Y-tranform occured -->
<div class="container">
<div class="content">
</div>
</div>
</section>

当前结构

<section>
<div class="content-holder"> <!-- Y-tranform occurs here -->
<div class="container">
<div class="content">
</div>
</div>
</div>
</section>