fullpage.js 无法滚动

问题描述

我想将 fullPage.js 添加到我的 HTML 网站。但是我的页面将无法滚动整个页面，只是停留在标题标签中的内容并且无法滚动到其他部分。我试图将每个部分的类名更改为“部分”，但它也不起作用。下面是我的代码

我的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"/>
</head>

<div id="fullPage">
<header>
  <div class="iframe-container">
    <div id="landingvideo" style="display:flex; align-items:center; justify-content:center;">
    <iframe  class="landingpage"scrolling="no" style="width:4500px; height:1000px; border:none;" marginheight="100%" marginwidth="100%" src="landingpage.html"></iframe>
    </div>
</div>
</header>
<iframe  class="minicarousel" src="minicarousel.PHP" frameborder="0" marginheight="100%" marginwidth="100%" width="100%" height="100%" scrolling="no"allowtransparency="true"></iframe>
</div>

<body>
<section class="section_position" id="section0">
    <div class="container mb-5">
      <div class="row">
        <div class="col-lg-12 mx-auto text-center">
        <p id="title">Lorem Ipsum</p>
        <p id="des1">Lorem ipsum dolor sit amet</p>
        <p id="des2">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nunc ligula arcu,venenatis at elit accumsan,tincidunt tempor ipsum. Maecenas risus sem,dignissim vitae velit vel,soDales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis,ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
        </div>
    </div>

  <div class="carousel-wrap container mb-5">
    <div class="owl-carousel owl-theme">
      <div class="item">
        <div class="row">
          <div class="col-md-12"> <br/>
            <img src="images.png" class="img" style="width: 100%; height: 438px;">
          </div>
        </div>
      </div>
      <div class="item">
        <div class="row">
          <div class="col-md-12"> <br/>
            <img src="images.png" class="img" style="width: 100%; height: 438px;">
          </div>
        </div>
      </div>
      <div class="item">
        <div class="row">
          <div class="col-md-12"> <br/>
            <img src="images.png" class="img" style="width: 100%; height: 438px;">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-12 mx-auto text-center mb-5">
    <a href="https://www.lipsum.com/Feed/html"><img src="images.png" ></a>
  </div>
</section>

<section class="section_position mb-5" id="section1">
    <div class="container">
      <div class="row">
      <div class="col-lg-12 mx-auto text-center">
      <p id="title">Lorem Ipsum</p>
        <p id="des1">Lorem ipsum dolor sit amet</p>
        <p id="des2">Lorem ipsum dolor sit amet,ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
      </div>
        <div class="col-lg-4">
          <center> <img class="icon1" src="images.png"> </center>
        </div>

        <div class="col-lg-4">
          <center> <img class="icon1" src="images.png"> </center>
        </div>

        <div class="col-lg-4">
            <center> <img class="icon1" src="images.png"> </center>
        </div>
    </div>
    <div class="col-md-12 mx-auto text-center ">
        <a href="#contactme" ><img src="images.png" ></a>
    </div>
</section>


<section class="section_position mb-5" id="section2">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 mx-auto text-center">
        <p id="title">Lorem Ipsum</p>
        <p id="des1">Lorem ipsum dolor sit amet</p>
        <p id="des2">Lorem ipsum dolor sit amet,ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
        </div>
        <div class="col-md-12">
            <video id="method" poster="imagespng" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" style="width: 100%;height: auto;">
                <source src="loop.mp4" type="video/mp4">
            </video>
        </div>
      </div>
    </div>
</br>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<script>
    new fullpage('#fullPage',{
        autoScrolling:true
    })
</script>
</body>

解决方法

您的 <body> 位于 HTML 的中间... 您正在 <body> 标记 (<div id="fullPage">) 等之前编写 HTML。

所以，简短的回答：

检查您的 HTML 代码。这是不正确的。

fullpage.js html jquery