2

I'm using fullpage js on my website and inside one of the sections I have included an iframe.

example issue

If you move to the last section in the example above you can't scroll further down unless you scroll outside the iframe. I found that this method in fullpage can be used to move a section up. fullpage method

$(document).on('click', '#moveUp', function(){
$.fn.fullpage.moveSectionUp();
});

Also this code can be used to detect if the iframe has reached the bottom. example iframe reaching bottom

$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) 
alert('Bottom reached');
});

The issue is discussed in this link as well but I cannot understand whats explained as the solution. How can I use these two examples to make the page scroll up and down after iframe reaches top or bottom?

Sameera
  • 151
  • 2
  • 11

2 Answers2

3

Totally expected.

If you want to make use of scrollable content then you'll have to use the scrollOverflow option provided by fullpage.js See an example here.

Otherwise you'll have to code yourself the detection of the scrollbar within that iframe and detect when it reaches the bottom of it, then call a fullpage.js function such as $.fn.fullpage.moveSectionDown().

Alvaro
  • 40,778
  • 30
  • 164
  • 336
1

Give iframe a name. get iframe.window. Then add scrollEvent listener

Coco
  • 457
  • 1
  • 3
  • 14