Question

我正在尝试创建一个网站，您可以在其中浏览整个页面高度的内容，但是当前随着鼠标滚轮的增加，它会滚动多次，但这不是问题，但是直到该网站在最后一个页面之间滚动时为止两页，它将像普通网站一样滚动，而不会向下滚动到最后一页。是否可以通过延迟输入或其他解决方案来解决？我将如何实现这一目标？

$(document).ready(function () {
    var divs = $('.page');
    var dir = 'up';
    var div = 0;
    $(document.body).on('DOMMouseScroll wheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
	$(window).on('load', function() {

	$(this).impulse({

	extent: $(window).height(),
	tempo: 150,
	method: 'linear',
	delay: true
	});
	});
});

body {
	margin:0;
	height:100vh;
  overflow:hidden;
}
.page {
	height:100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" type="text/css" href="css/css.css">
		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
	</head>
	<body>
	  <div class="page" style="background-color:blue;">
	  </div>
	  <div class="page"style="background-color:black;">
	  </div>
	  <div class="page"style="background-color:green;">
	  </div>
	  <div class="page"style="background-color:yellow;">
	  </div>
	</body>
	<script src="http://code.jquery.com/jquery-git.js"></script>
	<script src="js/pagescroller.js"></script>
</html>

如何解决半页滚动？

0 个答案: