html - 如何使用 **Fullpage.js** 将 fullpage.js 的部分分成两部分 (div) 并仅在右侧 (div) 启用 **滚动**？

Question

这是 HTML，但网页的 Div 可以正常工作!我需要在第二个 div 上添加更多内容，并在这样做时启用滚动。

<section class="vertical-scrolling" id="section">
<div id="abt">
      <div id="about" >
          <h3>about</h3>
      </div>
      <div id="abouttxt">
         content with scrolling
      </div>
</div>
</section>

这是 CSS:

#about {
height: relative;
    float: left;
}
#abouttxt {
    float: right;
    width: 50%;
    text-align: left;
    text-align: justify;
    text-justify: inter-word;
} 

Answer 1

HTML:

 <div class="section">
        <div class="leftSide">
            <div class="box">Whatever</div>
        </div>
        <div class="rightSide">
            <div class="box">Whatever</div>
            <div class="box">Whatever</div>
            <div class="box">Whatever</div>
        </div>
</div>

CSS:

.leftSide{
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
}
.rightSide{
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}

那么你必须使用 fullpage.js 的选项 normalScrollElements:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    normalScrollElements: '.rightSide'
});

Demo online