javascript - 在 FullPage.js 应用程序内滚动

Question

我目前正在制作一个 fullPage.js 应用程序。在给定页面上，我想要一张带有指向该图片的框箭头的图片。现在我已经成功实现了这一目标，问题是我需要在页面上使用多个这些框和图片元素，因此我希望能够滚动浏览给定页面上的元素。

这是JS，我明确包含了scrollOverflow属性。

$(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['Home', 'AboutMe', 'Education','Skills','Achievements','Portfolio','ContactMe'],
                slidesColor: ['purple', '#CA1E1E', '#F07A1A','#E7BC25', '#147727', '#1A77B4','#96A399'],
                'scrollOverflow': true, css3: true              
            });
        }); 

这是我的 HTML:

<div class="section" id="section2">
    <div class="intro">
                <h1  style="position:absolute;top:8%;left:45%;font-size:2em;" class="font2">consectetur</h1>

                <div style="position:absolute;top:20%;left:12.5%;width:65%">

                    <img  style="border-radius:50%;width:10%;border:5px solid #ffba00;position:absolute;left:0%;" src="images/plain.jpg">


                    <div class="arrow_box" style="left:15%;margin-top:-1%;padding:1.5%;border-radius:5px;color:white;font-family: 'Open Sans Light' !important;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco derit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>

                <div style="position:absolute;top:44%;left:12.5%;width:65%">
                    <img  style="border-radius:50%;border:5px solid #ffba00;width:10%;position:absolute;left:0%;font-family: 'Open Sans Light' !important;" src="images/plain.jpg">

                    <div class="arrow_box" style="left:15%;margin-top:-1%;padding:1.5%;border-radius:5px;color:white;font-family: 'Open Sans Light' !important;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco derit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>

                <div style="position:absolute;top:68%;left:12.5%;width:65%">
                    <img  style="border-radius:50%;width:10%;border:5px solid #ffba00;position:absolute;left:0%;font-family: 'Open Sans Light' !important;" src="images/plain.jpg">

                    <div class="arrow_box" style="left:15%;margin-top:-1%;padding:1.5%;border-radius:5px;color:white;font-family: 'Open Sans Light' !important;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco derit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>

                <div style="position:absolute;top:92%;left:12.5%;width:65%">
                    <img  style="border-radius:50%;width:10%;border:5px solid #ffba00;position:absolute;left:0%;font-family: 'Open Sans Light' !important;" src="images/plain.jpg">

                    <div class="arrow_box" style="left:15%;margin-top:-1%;padding:1.5%;border-radius:5px;color:white;font-family: 'Open Sans Light' !important;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco derit in voluptate velit esse cillum dolore eu fugiat. cillum dolore eu fugiat nulla pariatur. olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>

    </div>
</div>

不幸的是，我不断收到以下信息:

滚动没有开始，我不确定为什么？为什么要有想法？理想情况下，第四个框和图像元素应以可滚动的方式出现

Answer 1

听起来这是因为在每个元素中使用 position:absolute 造成的。 尝试避免它，无论如何你都不应该需要它。

您的代码包含 HTML 错误，这也很可能是原因。 您可以在这里看到它们为红色:http://jsfiddle.net/gGL9V/