Fullpage.js 和 scrolloverflow.js 的禁用内容链接

Question

我在我的一个项目中使用 fullpage.js 和 scrolloverflow.js。使用选项 "scrollOverflow : true" 后，任何受影响部分的内容链接都将被禁用。

这是我自己调用整页的函数：

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

这是加载 Fullpage.js 和 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>

Bug 正在影响此 site。链接位于带有圆形图像的框周围。

感谢任何帮助。谢谢！

Answer 1

请向您的项目或代码片段显示一个网络 link，以便我们查看。
肯定有什么东西阻止了您正在使用的插件的功能。

Answer 2

这是 scrolloverflow.js 中的一个已知错误，它是 iScroll.js 的一个分支。见题目in their github forum.

您也可以在fullpage.js forum中关注。

目前最好的解决方案是检测用户是否通过触摸设备访问，并按照this post中的建议在scrolloverflow选项中打开click:true或click:false。

Fullpage.js 和 scrolloverflow.js 的禁用内容链接

Disabled Content Links with Fullpage.js and scrolloverflow.js

html

javascript

css

jquery

fullpage.js