如何解决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 代码。这是不正确的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。