Question

Heyo，

我有一点Fullpage-Scroll-Script，我想让它的静态程度有所降低。因此，如果所有Div只有一个{，那么我想使脚本工作，而不是通过不同的Class（.one，.two，.tree ...）来调用每个Divs {1}}（。page）。我用Class中的.each() function自己尝试过...但是我无法使它正常工作。

这是当前的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'); }。

Answer 1

您需要在每个循环中传递$(this)并更改page变量以直接获取参数：

// 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/

使整页滚动脚本的静态性降低

1 个答案: