添加水平滑块时，Fullpage.js 滚动溢出不起作用

Question

我在我的网站上使用 fullpage.js。我有几个很长的页面并添加了 scrollOverflow: true 以使这些页面完全可滚动。在我合并一个水平滑块之前效果很好，然后 scrollOverflow 停止工作。我知道可以有一个使用 scrollOverflow 和水平滑块的页面，因为 Alvaro 在他的网站 (http://www.alvarotrigo.com/fullPage/examples/scrolling.html#secondPage) 上演示了它，但我似乎无法让它工作。这是一个简单的示例，您无法滚动到第 1 页第二个绿色框的底部；而是流到第 2 页：

<div id="fullpage">

<div class="section">
   <div id="clients">
        <div id="logosTop"></div>

        <div id="logosBottom"></div>

        <div id="slider">
            <div class="slide">Text here</div>
            <div class="slide">Text here</div>
            <div class="slide">Text here</div>
            <div class="slide">Text here</div>
        </div>
    </div>
</div>

<div class="section">Some section</div>  
</div>

<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage( {
scrollOverflow: true,
verticalCentered: false,
});
});

CSS：

#clients {
position: relative;
width: 750px;
height: 100%;
left: 50%;
margin-left: -375px;
}


#logosTop {
background-color:#096;
width: 1025px;
height: 235px;
position: absolute;
margin-top: 50px;
margin-left: -137px;
}

#logosBottom {
background-color:#096;
width: 1025px;
height: 340px;
position: absolute;
margin-top: 715px;
margin-left: -137px;
}

#slider {
position: absolute;
margin-top: 450px;
width: 740px;
margin-left: 5px;
}

.slide {
font-family: Arial;
font-size: 15px;
}

Answer 1

#slider {
    position: absolute;
    margin-top: 450px;
    width: 740px;
    margin-left: 5px;
}

那里要小心。您正在使用 absolute 位置，因为这会将它们移出页面结构，并且 fullPage.js 将无法检测到幻灯片内容的高度。