scrollTo延迟页面转换效果

Question

我正在进行看起来像堆叠卡片的页面转换。 向下滚动时，显示下面的卡片。 但滚动回来查看以前的卡片很笨拙，我无法弄清楚原因。 当您快速向上滚动时，过渡效果似乎被中断。

请看这里的工作示例：

 $(window).on('beforeunload', function(){ $(window).scrollTop(0); }); $(function(){ var trueHeight = 0; $('section').each(function() { trueHeight += $(this).outerHeight(); var scrollHeight = trueHeight - $(this).outerHeight(); $(this).data('offset', scrollHeight); }); $('body,html').css({height: trueHeight + "px"}); $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); $('section').each(function() { var off = $(this).data('offset'); if (scrollTop > off) { var translate = (scrollTop - off) / $(window).height() * 100; $(this).css({transform: 'translateY(' + -translate +'%)'}); } }); }); }); 

 /* Welcome to Compass. * In this file you should write your main styles. (or centralize your imports) * Import this file using the following HTML or equivalent: * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } html, body { margin: 0; position: relative; } p { position: absolute; top: 50px; left: 100px; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 22.652px; z-index: 999; } h1 { margin-top: 48%; text-align: center; font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 22.652px; } .copy { float: left; display: block; margin-right: 2.35765%; width: 65.88078%; margin-left: 34.11922%; } .copy:last-child { margin-right: 0; } .container { position: fixed; width: 100%; height: 100vh; overflow: hidden; } section { width: 100%; position: absolute; top: 0; height: 735px; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.15); } #hero { background: #bada55; z-index: 99; } #project1 { background: #54d9d5; z-index: 98; } #project2 { background: #e49012; z-index: 97; } #project3 { background: #545fd9; z-index: 96; } #project4 { background: #e312cb; z-index: 95; } #project5 { background: #d95454; z-index: 94; } #project6 { background: #e3dd12; z-index: 93; } 

 <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div class="container"> <section id="hero"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project1"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project2"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project3"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project4"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project5"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project6"> <div class="copy"> <h1>Hello There</h1> </div> </section> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\\/script>')</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <script src="js/main.js"></script> </body> 

我猜测我的数学是关闭还是jquery无法处理快速滚动。 有更好的解决方案吗？

Answer 1

结果证明了这一点：

    $('section').each(function() {
        var off = $(this).data('offset');
        if (scrollTop > off) {
            var translate = (off - scrollTop) / $(window).height() * 100;
            $(this).css({transform: 'translateY(' + translate +'%)'});
        }
        else {
            $(this).css({transform: 'translateY(' + 0 + '%)'});
        }
    });

添加else语句解决了我的问题。 没有它， <section>不知道何时停止翻译。 数学是这样的，如果用户快速滚动，var translate将永远不会实际为零。