我只是想知道如何在一个滚动条上移动整个div。
实际上在我的网站（http://codinghub.ga/development.html）中我有不同div的内容。我想将整个div转换为滚动一次。就像在https://www.kingoapp.com/中一样，以及如何在本网站中突出显示活跃的div。
答案 0 :(得分：1)
一个简单易用的插件，用于创建全屏滚动网站（也称为单页网站或单页网站）。它允许创建全屏滚动网站，以及在网站各部分内添加一些风景滑块。
示例：
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
css3: true
});
});/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
h1{
font-size: 6em;
}
p, h2{
font-size: 2em;
}
h2{
color:inherit;
}
.section{
text-align:center;
}
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
#section0 img,
#section1 img{
margin: 20px 0 0 0;
}
#section2 img,
#section3 img{
margin: 20px 0 0 52px;
}<link href="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script>
<ul id="menu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third section</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Fourth section</a></li>
</ul>
<div id="fullpage">
<div class="section active" id="section0">
<h1>Single Page Demo</h1>
<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
</div>
<div class="section" id="section1">
<div class="slide active">
<div class="intro">
<h1>Create Sliders</h1>
<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
<h1>Simple</h1>
<p>Easy to use. Configurable and customizable.</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
<h1>Cool</h1>
<p>It just looks cool. Impress everybody with a simple and modern web design!</p>
</div>
</div>
<div class="slide">
<div class="intro">
<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
<h1>Compatible</h1>
<p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Easy to use plugin</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
</div>
<img src="http://static.webpie.net/files/11/images/web68-logo-small.png" alt="web68" />
</div>
</div>
请您查看上面的代码段吗？我认为这对你更有帮助。
答案 1 :(得分：0)
答案..
添加fullpage.js
并在每个邮件DIV中设置ID ..
示例： https://webdesign.tutsplus.com/articles/vertical-and-horizontal-scrolling-with-fullpagejs--cms-24215
我希望它对你有所帮助..