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无法检测到幻灯片内容的高度。

添加水平滑块时，Fullpage.js Scroll Overflow无法正常工作

1 个答案: