1

我有这个网站骨架：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 lang="en">
<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 只有基本的了解。

4

1 回答 1

1 

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 lang="en">
<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>
你可以检查一下

于 2019-12-03T13:05:43.247 回答