在固定元素上滾動fullpagejs

Question

我正在嘗試設計一個包含fullpage.js的網站，其中包含覆蓋部分屏幕的固定元素。 問題是，當鼠標懸停在那些固定元素上時，滾動操作不正常（參見jsfiddle示例 ）

這是我的HTML：

<div class="hider" style="top: 0"></div>
<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
</div>
<div class="hider" style="bottom: 0"></div>

這是我的css：

body {
    text-align: center;
}
.section {
    font-size: 32px;
    background-color: #b3d4fc;
}
.hider {
    width: 100%;
    height: calc(50% - 20px);
    background-color: #3461ff;
    position: fixed;
    z-index: 1;
}

我希望能夠在鼠標懸停在固定元素上時滾動，並用智能手機或平板電腦用手指在固定的div上向上或向下滑動。 我怎樣才能做到這一點？

Answer 1

只需將固定元素放在fullpage div中即可。

<div id="fullpage">
    <div class="hider" style="top: 0"></div>
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="hider" style="bottom: 0"></div>
</div>