javascript - 使 Fullpage-Scroll-Script 不那么静态

Question

嘿嘿，

我得到了一点Fullpage-Scroll-Script，我想让它不那么静态。Div因此，与其通过不同的（.one、.two、.tree ...）调用每个Class脚本，我想让脚本Divs在只有一个Class（.page）的情况下工作。我自己用.each() functionfrom jQuery... 尝试过，但我无法让它工作。

这是当前的Script：

// Fullpage Scroll Script
function ScrollHandler(pageClass) { 
	var page = $('.' + pageClass);
	var pageStart = page.offset().top;
	var pageJump = false;

	function scrollToPage() {
		pageJump = true;
			$('html, body').animate({ 
			scrollTop: pageStart 
		}, {
			duration: 1000,
			easing:'swing',
			complete: function() {
				pageJump = false;
			}
		});  
	}
	window.addEventListener('wheel', function(event) {
		var viewStart = $(window).scrollTop();
		if (!pageJump) { 
			var pageHeight = page.height();
			var pageStopPortion = pageHeight / 2;
			var viewHeight = $(window).height();

			var viewEnd = viewStart + viewHeight;
			var pageStartPart = viewEnd - pageStart;
			var pageEndPart = (pageStart + pageHeight) - viewStart;
			
			var canJumpDown = pageStartPart >= 0; 
			var stopJumpDown = pageStartPart > pageStopPortion; 
			
			var canJumpUp = pageEndPart >= 0; 
			var stopJumpUp = pageEndPart > pageStopPortion; 

			var scrollingForward = event.deltaY > 0;
			if (  ( scrollingForward && canJumpDown && !stopJumpDown) || (!scrollingForward && canJumpUp   && !stopJumpUp)) {
				event.preventDefault();
				scrollToPage();
			}
		} else {
			event.preventDefault();
		}    
	});
}
new ScrollHandler('one'); 
new ScrollHandler('two');
new ScrollHandler('three');

* {
  margin:0;
  padding:0;
}
.page {
  height: 100vh;
}
.one { background-color: blue; }
.two { background-color: green; }
.three { background-color: orange; }

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

<div class="page one"></div>
<div class="page two"></div>
<div class="page three"></div>

所以不要使用：

new ScrollHandler('one'); 
new ScrollHandler('two');
new ScrollHandler('three');

我试着用这个：

$('.page').each(function() {
  new ScrollHandler('page');
}

但它只适用于第一个Div。

标签： javascriptjquery

Answer 1

您需要传入$(this)每个循环并更改页面变量以直接获取参数：

// Fullpage Scroll Script
function ScrollHandler(pageClass) {
  var page = pageClass;
  var pageStart = page.offset().top;
  var pageJump = false;

  function scrollToPage() {
    pageJump = true;
    $('html, body').animate({
      scrollTop: pageStart
    }, {
      duration: 1000,
      easing: 'swing',
      complete: function() {
        pageJump = false;
      }
    });
  }
  window.addEventListener('wheel', function(event) {
    var viewStart = $(window).scrollTop();
    if (!pageJump) {
      var pageHeight = page.height();
      var pageStopPortion = pageHeight / 2;
      var viewHeight = $(window).height();

      var viewEnd = viewStart + viewHeight;
      var pageStartPart = viewEnd - pageStart;
      var pageEndPart = (pageStart + pageHeight) - viewStart;

      var canJumpDown = pageStartPart >= 0;
      var stopJumpDown = pageStartPart > pageStopPortion;

      var canJumpUp = pageEndPart >= 0;
      var stopJumpUp = pageEndPart > pageStopPortion;

      var scrollingForward = event.deltaY > 0;
      if ((scrollingForward && canJumpDown && !stopJumpDown) || (!scrollingForward && canJumpUp && !stopJumpUp)) {
        event.preventDefault();
        scrollToPage();
      }
    } else {
      event.preventDefault();
    }
  });
}
$('.page').each(function() {
  new ScrollHandler($(this));
})

* {
  margin: 0;
  padding: 0;
}

.page {
  height: 100vh;
}

.one {
  background-color: blue;
}

.two {
  background-color: green;
}

.three {
  background-color: orange;
}

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

<div class="page one"></div>
<div class="page two"></div>
<div class="page three"></div>

JSfiddle：https ://jsfiddle.net/fw8h7v4q/