[英]Disabled Content Links with Fullpage.js and scrolloverflow.js
I'm using fullpage.js and scrolloverflow.js in one of my projects. 我在其中一个项目中使用了fullpage.js和scrolloverflow.js。 After using the option "scrollOverflow : true" , the content links in any affected section become disabled. 使用选项“ scrollOverflow:true”后 ,任何受影响部分中的内容链接都将被禁用。
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: 这是加载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 </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.
</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 . 该Bug正在影响此站点 。 The Links are around the boxes with the circle images. 链接在带有圆圈图像的框周围。
I appreciate any help. 感谢您的帮助。 Thanks! 谢谢!
Please display a web link to your project or code snippet so we can take a look. 请显示指向您的项目或代码段的Web链接,以便我们查看。
Something is definitely blocking functionality from plugins that you are using. 肯定是某种原因阻止了您正在使用的插件的功能。
That's a known bug in scrolloverflow.js which is a fork of iScroll.js. 这是scrolloverflow.js中的一个已知错误,它是iScroll.js的分支。 See the topic in their github forum . 在他们的github论坛中查看该主题。
You can also follow it in fullpage.js forum . 您也可以在fullpage.js论坛中关注它。
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 . 最好的解决办法,到目前为止是检测用户是否通过触摸设备访问或没有,打开click:true
或click:false
的scrolloverflow选项中所建议的这个帖子 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.