Question

我在多个fullPage.js sections中有一个可滚动容器。

这些容器具有position: absolute，并占据了section的整个空间。

里面有一些内容，它们不会占据height和width的100％（因为父级上的padding和自身上的max-width）。

现在，当您第一次滚动此容器时，它会按预期工作。但是，当您尝试第二次滚动时，仅当鼠标悬停在内部内容元素（代码片段中带有红色边框的元素）上时，它才起作用。如果oyu滚动到该框外，则什么也不会发生。

我还尝试向可滚动容器中添加背景色，但没有任何运气。

在macOS上使用最新的Firefox 65和Safari 11，我的行为相同。

$('#fullpage').fullpage({
	sectionsColor: ['yellow', 'green', 'purple', 'orange'],
  normalScrollElements: '.test'
});

fullpage_api.setAllowScrolling(false);

.test {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  padding: 50px 0;
  background: rgba(255, 255, 255, 0.5);
}

.test-content {
  max-width: 200px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" rel="stylesheet"/>

<div id="fullpage">
  <div class="section">
    <div class="test">
      <div class="test-content">
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        End of Section 1
      </div>
    </div>
  </div>
  
  <div class="section">
    <div class="test">
      <div class="test-content">         
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>Section 1<br>
        End of Section 1
      </div>
    </div>
  </div>
  <div class="section">Section 3</div>
  <div class="section">Section 4</div>
</div>

这里也是fiddle。

我是否缺少设置？这是设计使然吗？这是一个错误吗？

为何第二遍滚动fullPage.js选项“ normalScrollElements”不起作用？

0 个答案: