第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

用戶向下或向上滾動(dòng)超過(guò)某個(gè)點(diǎn)后如何自動(dòng)滾動(dòng)到下一頁(yè)/上一頁(yè)

用戶向下或向上滾動(dòng)超過(guò)某個(gè)點(diǎn)后如何自動(dòng)滾動(dòng)到下一頁(yè)/上一頁(yè)

ibeautiful 2022-01-20 20:49:39
我有這個(gè)網(wǎng)站骨架: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>我正在嘗試實(shí)現(xiàn)一個(gè)自動(dòng)滾動(dòng)方法,只要用戶向下或向上滾動(dòng)到當(dāng)前頁(yè)面上的某個(gè)點(diǎn),它就應(yīng)該滾動(dòng)到下一個(gè)/上一個(gè)“頁(yè)面”。這是一個(gè)例子:https ://www.virtueworldwide.com/我什至不知道要搜索什么,這就是我在這里發(fā)布的原因。這個(gè)方法有名字嗎?我想在正確的方向上得到一些指示。我很確定這將需要 JS/JQuery,但我想不出實(shí)現(xiàn)它的方法,因?yàn)槲覍?duì) JavaScript 只有基本的了解。
查看完整描述

1 回答

?
MYYA

TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個(gè)贊

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>


查看完整回答
反對(duì) 回復(fù) 2022-01-20
  • 1 回答
  • 0 關(guān)注
  • 220 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)