jQuery 100%垂直滚动(滑动滚动)

jQuery 100% vertical scroll (slide scrolling)

本文关键字：滚动 垂直 jQuery 100%      更新时间：2023-09-26

我知道有很多很棒的插件用于此目的，但我觉得这是我想使用很多的东西，所以我想看看它是如何完成的!我知道你可以这样做:

html: 

<div id="section1">
<div id="section2">
css: 

#section1{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#section2{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}
#section1:active{
  position: fixed;
}
#section2:active{
  position: fixed;
}
jQuery: 

$(".wrapper").on('mousewheel DOMMouseScroll', function (event) {
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    $('.slide-1').addClass('active');
} else {
    $('.slide-2').addClass('active');
}
});

我想知道你是怎么做的最好的方法。对于代码我很抱歉，这只是我快速写的东西。

这实际上是最典型的增量计数器。您将需要jQuery mousewheel之类的库。然后你会有一个你可以听到的事件，叫做"mousewheel"。一旦你有了这些，基本的逻辑看起来像这样(在下面的红色窗口中滚动):

var deltaCounter = 0,
	oldDelta = 0,
	scrollDirection = 0,
	threshold = 250;
$("html").on('mousewheel', function(e) {
	e.preventDefault();
	deltaCounter += e.deltaY;
	if (Math.abs(deltaCounter) >= threshold) {
		deltaCounter = 0;
		if (scrollDirection === 0) {
			next();
		} else {
			prev();
		}
	}
	if (oldDelta < deltaCounter) {
		scrollDirection = 1;
	} else {
		scrollDirection = 0;
	}
	oldDelta = deltaCounter;
});
function next(){
	console.log("NEXT PAGE");
}
function prev(){
	console.log("PREV PAGE");
}
body{
  background-color:rgba(255,200,200,0.3);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

一旦你有了这个，你可以在"下一页"answers"上一页"的情况下应用任何你想要发生的事情。调整threshold将决定"页面"之间需要多少滚动

你可以试试

    $("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

#button可以是任何东西。基本上，点击#按钮会把你带到#elementtoScrollToID的顶部，并带有动画

相关文章：