CODEWITHSUNDEEP
javascriptiosfullpage.js
nonnnnn
nonnnnn

Reputation: 693

fullpage.js - Scrolling inside a div which is not in the fullpage.js wrapper not possible on IOS

I have a Fullpage.js wrapper and a special overlay or footer wrapper. My problem now is, that i can't scroll the content inside the footer div on IOS. it works on android and all major browsers, but not on IOS.

Any ideas how i can get this to work? Just open the fiddle on a IOS device and try to scroll the white footer https://jsfiddle.net/t5eu2hdc/9/

Many thanks in advance for your help.

$('.viewport').fullpage({
    anchors: ['test', 'test2', 'test3'],
    navigation: true,
    navigationPosition: 'right',
    css3: true,
    easingcss3: 'ease-in-out',
    //fixedElements: '.footer',
    normalScollElements: '.footer-inner',
    scrollingSpeed: 1000,
    scrollOverflow: true,
    controlArrows: false,
});
<div class="viewport">
    <div class="section">1</div>
    <div class="section">2</div>
    <div class="section">3</div>
</div>
<div class="footer">
    <div class="footer-inner">
        here goes the text 
    </div>
</div>

Upvotes: 2

Views: 570

Answers (2)

nonnnnn
nonnnnn

Reputation: 693

Unfortunately, nothing suggested in the github issues forum worked in my case. So i moved over to IScroll for scrolling on IOS devices. Now it works pretty good. For Android and normal browsers i can still use the native scrolling.

Upvotes: 0

Alvaro
Alvaro

Reputation: 41595

I answered your question in the github issues forum.

As suggested:

I would suggest you to use css3:false and place the element within the fullPage.js wrapper. Then use normalScrollElements.

Other than that... you would have to modify the library and change a few things as suggested in this comment.

Upvotes: 1

Related Questions