滚动延迟页面过渡效果

scrollTo delay on page transition effect

本文关键字：过渡效果 延迟 滚动      更新时间：2023-09-26

我正在处理一个看起来像堆叠卡片的页面转换。当你向下滚动时，下面的卡片就会显示出来。但是，向上滚动查看以前的卡片很烦人，我不明白为什么。当您快速向上滚动时，过渡效果似乎被打断了。

参见此处的工作示例：

$(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无法处理快速滚动。有更好的解决方案吗？

事实证明，这起到了作用：

    $('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实际上永远不会达到零。

相关文章：