为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

ibeautiful 2022-01-20 20:49:39
我有这个网站骨架: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 只有基本的了解。
查看完整描述

1 回答

?
MYYA

TA贡献1868条经验 获得超4个赞

var PR = {

  active : 0,

  init : function(){

    $('body').on('mousewheel DOMMouseScroll',PR.mouseWhell);

  },

  

  mouseWhell : function(e)

  {

     if(typeof e.originalEvent.detail == 'number' &&        e.originalEvent.detail !== 0) {

      if(e.originalEvent.detail > 0) {

        console.log('Down');

        PR.go(-1);

      } else if(e.originalEvent.detail < 0){

        console.log('Up');

        PR.go(1);

      }

    } else if (typeof e.originalEvent.wheelDelta == 'number') {

      if(e.originalEvent.wheelDelta < 0) {

        console.log('Down');

        PR.go(-1);

      } else if(e.originalEvent.wheelDelta > 0) {

        console.log('Up');

        PR.go(1);

      }

    }

  },

  

  go : function(plus){

    console.log('go');

    if($('body').hasClass('working'))

      return;

    $('body').addClass('working');

    var eq = PR.active - plus;

     console.log(eq);


    var targetSection= $('.section')[eq];

    if(targetSection == null){

      $('body').removeClass('working');

      return;

    }

            console.log("animte");


    $([document.documentElement, document.body]).animate({

        scrollTop: targetSection.offsetTop

    }, 2000, function() {

      $('body').removeClass('working');

      PR.active = eq;

    });

  }

};


$(document).ready(function(){ PR.init();});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!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 class="section">

        <h1>Lorem Ipsum</h1>

    </header>

    <nav>


    </nav>

    <div class="container_page_1 section">

    </div>

    <div class="container_page_2 section">

    </div>

</body>

</html>


查看完整回答
反对 回复 2022-01-20
  • 1 回答
  • 0 关注
  • 200 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信