Disabled Content Links with Fullpage.js and scrolloverflow.js

Question

I'm using fullpage.js and scrolloverflow.js in one of my projects. After using the option "scrollOverflow : true", the content links in any affected section become disabled.

This is my own Function to call Fullpage:

    jQuery('#fullpage-scroll').fullpage({
        keyboardScrolling : true,
        navigation : true,
        scrollOverflow : true 
    });

This is the Code for an affected section after loading Fullpage.js and Scrolloverflow.js:

<section id="marketing-tools" class="section fp-section fp-table active fp-completely" style="height: 886px;">
<div style="height:886px;" class="fp-tableCell">
    <div class="fp-scrollable" style="height: 886px;">
        <div class="fp-scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, -359px) translateZ(0px);">
            <div class="marketing-bg">
                <div class="headerimage-teaserbox center" id="c210">
                    <div class="csc-textpic csc-textpic-center csc-textpic-above">
                        <div data-csc-cols="2" data-csc-images="1" class="csc-textpic-imagewrap">
                            <figure class="csc-textpic-image csc-textpic-last"><img width="1500" height="1003" alt="" src="fileadmin/user_upload/header/Start_audience-868074_1920_pixabay.jpg">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
            <div class="marketing-content">

                <div class="csc-default" id="c1335">
                    <h2>Auf den Überblick kommt es an</h2>
                    <h3>E-Mail Newsletter | Eventmarketing | Online Umfragen&nbsp;</h3>
                </div>

                <div class="csc-default" id="c213">
                    <div class="container">
                        <div class="csc-default" id="c214">
                            <div class="row col3 col3-33">
                                <div class="col col-1" style="height: 513px;">
                                    <div class="cirlce-image small" id="c215">
                                        <div class="csc-textpic csc-textpic-center csc-textpic-above">
                                            <div data-csc-cols="2" data-csc-images="1" class="csc-textpic-imagewrap">
                                                <figure class="csc-textpic-image csc-textpic-last">
                                                    <a href="e_mail_marketing/"><img width="438" height="438" alt="" src="fileadmin/user_upload/layoutbilder/Iconbilder/E_Mail_Marketing.png"></a>
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="csc-default" id="c218">
                                        <h3>E-Mail Marketing</h3>
                                        <p class="bodytext">
                                            Vom E-Mail Newsletter bis zu vollautomatischen Kampagnen mit Auswertungen in Echtzeit.
                                        </p>
                                        <p class="bodytext">
                                            eyepin ist einfach zu bedienen, bietet hohe Effizienz und gibt Ihrer Marke einen perfekten Auftritt.&nbsp;
                                        </p>
                                    </div>
                                    <a href="e_mail_marketing/" class="more-link-invisible"><img width="438" height="438" alt="" src="fileadmin/user_upload/layoutbilder/Iconbilder/E_Mail_Marketing.png"></a>
                                </div>
                                <div class="col col-2" style="height: 513px;">
                                    <div class="cirlce-image small" id="c216">
                                        <div class="csc-textpic csc-textpic-center csc-textpic-above">
                                            <div data-csc-cols="2" data-csc-images="1" class="csc-textpic-imagewrap">
                                                <figure class="csc-textpic-image csc-textpic-last">
                                                    <a href="event-marketing/"><img width="438" height="438" alt="" src="fileadmin/user_upload/layoutbilder/Iconbilder/Event.png"></a>
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="csc-default" id="c219">
                                        <h3>Eventmarketing</h3>
                                        <p class="bodytext">
                                            Veranstaltungen einfach online organisieren inklusive Event Website, Einladungsmanagement und Gästeliste.
                                        </p>
                                        <p class="bodytext">
                                            Mit eyepin bieten Sie Ihren Gästen den nötigen Komfort schon im Vorfeld der Veranstaltung.
                                        </p>
                                    </div>
                                    <a href="event-marketing/" class="more-link-invisible"><img width="438" height="438" alt="" src="fileadmin/user_upload/layoutbilder/Iconbilder/Event.png"></a>
                                </div>
                                <div class="col col-3" style="height: 513px;">
                                    <div class="cirlce-image small" id="c217">
                                        <div class="csc-textpic csc-textpic-center csc-textpic-above">
                                            <div data-csc-cols="2" data-csc-images="1" class="csc-textpic-imagewrap">
                                                <figure class="csc-textpic-image csc-textpic-last">
                                                    <a href="marketing-suite/"><img width="439" height="438" alt="" src="fileadmin/user_upload/layoutbilder/Iconbilder/MarketingSuite.png"></a>
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="csc-default" id="c220">
                                        <h3>Marketing Suite</h3>
                                        <p class="bodytext">
                                            Sieben auf einen Streich: Die Marketing Suite bietet sieben Softwarelösungen in einer Marketing Suite.
                                        </p>
                                        <p class="bodytext">
                                            Newsletter | Eventmanagement | Online Umfragen | Landingpages | SMS/WhatsApp | Gewinnspiele | Social Media
                                        </p>
                                    </div>
                                    <a href="marketing-suite/" class="more-link-invisible"><img width="439" height="438" alt="" src="fileadmin/user_upload/layoutbilder/Iconbilder/MarketingSuite.png"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="invisible">
        </div>
        <div style="position: absolute; z-index: 9999; width: 7px; bottom: 2px; top: 2px; right: 1px; overflow: hidden; pointer-events: none;" class="iScrollVerticalScrollbar iScrollLoneScrollbar">
            <div style="box-sizing: border-box; position: absolute; background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 3px; width: 100%; transition-duration: 0ms; display: block; height: 620px; transform: translate(0px, 255px) translateZ(0px); transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);" class="iScrollIndicator"></div>
        </div>
    </div>
</div>
</section>

The Bug is affecting this site. The Links are around the boxes with the circle images.

I appreciate any help. Thanks!

Answer 1

That's a known bug in scrolloverflow.js which is a fork of iScroll.js. See the topic in their github forum.

You can also follow it in fullpage.js forum.

The best solution so far is to detect whether the user is accessing through a touch device or not and turn click:true or click:false in scrolloverflow options as suggested in this post.

Answer 2

Please display a web link to your project or code snippet so we can take a look.
Something is definitely blocking functionality from plugins that you are using.