Question

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

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');
}
});

我想学习如何以最好的方式做到这一点。我很抱歉代码只是我写的很快。

Answer 1

您可以尝试类似

的内容

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

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

Answer 2

这实际上通常是使用增量计数器完成的。你需要一个像jQuery mousewheel这样的库。那么你将有一个你可以听到的事件叫做＃34; mousewheel＆＃34;。一旦你有了，基本逻辑将如下所示（在下面的红色窗口中滚动）：

＆＃13;

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");
}

＆＃13;

body{
  background-color:rgba(255,200,200,0.3);
  }

＆＃13;

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

＆＃13;

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

jQuery 100％垂直滚动（幻灯片滚动）

2 个答案: