猿问

用户向下或向上滚动超过某个点后如何自动滚动到下一页/上一页

我有这个网站骨架：https ://codepen.io/bleah1/pen/mdyybLB


/* *** index.html - START *** */

body, html {

    height: 100%;

    margin: 0;

    padding: 0;

}


header {    

    height: 100%;

    background-image: url("https://i.postimg.cc/8P4zT6K0/ps4-controller-min.jpg");

    background-attachment: fixed;

    background-position: bottom center;

    background-repeat: no-repeat;

    background-size: cover;

    text-align: center;

    

}


header h1 {

    font-size: 32px;

    font-weight: bold;

    vertical-align: middle;

    margin: 0 auto;

}


.container_page_1 {

    width: 100%;

    height: 100%;

    background-color: red;

}


.container_page_2 {

    width: 100%;

    height: 100%;

    background-color: green;

}


/* *** index.html - END *** */

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Home</title>

</head>

<body>

    <header>

        <h1>Lorem Ipsum</h1>

    </header>

    <nav>


    </nav>

    <div class="container_page_1">

    </div>

    <div class="container_page_2">

    </div>

</body>

</html>

我正在尝试实现一个自动滚动方法，只要用户向下或向上滚动到当前页面上的某个点，它就应该滚动到下一个/上一个“页面”。

这是一个例子：https ://www.virtueworldwide.com/

我什至不知道要搜索什么，这就是我在这里发布的原因。这个方法有名字吗？

我想在正确的方向上得到一些指示。我很确定这将需要 JS/JQuery，但我想不出实现它的方法，因为我对 JavaScript 只有基本的了解。


ibeautiful
浏览 231回答 1
1回答

MYYA

var PR = {&nbsp; active : 0,&nbsp; init : function(){&nbsp; &nbsp; $('body').on('mousewheel DOMMouseScroll',PR.mouseWhell);&nbsp; },&nbsp;&nbsp;&nbsp; mouseWhell : function(e)&nbsp; {&nbsp; &nbsp; &nbsp;if(typeof e.originalEvent.detail == 'number' &&&nbsp; &nbsp; &nbsp; &nbsp; e.originalEvent.detail !== 0) {&nbsp; &nbsp; &nbsp; if(e.originalEvent.detail > 0) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('Down');&nbsp; &nbsp; &nbsp; &nbsp; PR.go(-1);&nbsp; &nbsp; &nbsp; } else if(e.originalEvent.detail < 0){&nbsp; &nbsp; &nbsp; &nbsp; console.log('Up');&nbsp; &nbsp; &nbsp; &nbsp; PR.go(1);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else if (typeof e.originalEvent.wheelDelta == 'number') {&nbsp; &nbsp; &nbsp; if(e.originalEvent.wheelDelta < 0) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('Down');&nbsp; &nbsp; &nbsp; &nbsp; PR.go(-1);&nbsp; &nbsp; &nbsp; } else if(e.originalEvent.wheelDelta > 0) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('Up');&nbsp; &nbsp; &nbsp; &nbsp; PR.go(1);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp;&nbsp;&nbsp; go : function(plus){&nbsp; &nbsp; console.log('go');&nbsp; &nbsp; if($('body').hasClass('working'))&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; $('body').addClass('working');&nbsp; &nbsp; var eq = PR.active - plus;&nbsp; &nbsp; &nbsp;console.log(eq);&nbsp; &nbsp; var targetSection= $('.section')[eq];&nbsp; &nbsp; if(targetSection == null){&nbsp; &nbsp; &nbsp; $('body').removeClass('working');&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("animte");&nbsp; &nbsp; $([document.documentElement, document.body]).animate({&nbsp; &nbsp; &nbsp; &nbsp; scrollTop: targetSection.offsetTop&nbsp; &nbsp; }, 2000, function() {&nbsp; &nbsp; &nbsp; $('body').removeClass('working');&nbsp; &nbsp; &nbsp; PR.active = eq;&nbsp; &nbsp; });&nbsp; }};$(document).ready(function(){ PR.init();});/* *** index.html - START *** */body, html {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}header {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; background-image: url("https://i.postimg.cc/8P4zT6K0/ps4-controller-min.jpg");&nbsp; &nbsp; background-attachment: fixed;&nbsp; &nbsp; background-position: bottom center;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-size: cover;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp;&nbsp;}header h1 {&nbsp; &nbsp; font-size: 32px;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; margin: 0 auto;}.container_page_1 {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; background-color: red;}.container_page_2 {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; background-color: green;}/* *** index.html - END *** */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <title>Home</title></head><body>&nbsp; &nbsp; <header class="section">&nbsp; &nbsp; &nbsp; &nbsp; <h1>Lorem Ipsum</h1>&nbsp; &nbsp; </header>&nbsp; &nbsp; <nav>&nbsp; &nbsp; </nav>&nbsp; &nbsp; <div class="container_page_1 section">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="container_page_2 section">&nbsp; &nbsp; </div></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答