javascript - Fullpage js 停止在 iframe 内滚动

标签 javascript jquery html iframe fullpage.js

我在我的网站上使用全页 js,并在其中一个包含 iframe 的部分中使用。

example issue

如果移至上例中的最后一部分,则无法进一步向下滚动,除非滚动到 iframe 之外。我发现全页中的这个方法可以用来向上移动一个部分。 fullpage method

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

此代码还可用于检测 iframe 是否已到达底部。 example iframe reaching bottom

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

此问题在 link 中讨论也是如此,但我无法理解解决方案的解释。 如何使用这两个示例使 iframe 到达顶部或底部后页面上下滚动?

最佳答案

完全符合预期。

如果您想使用可滚动内容,则必须使用 fullpage.js 提供的scrollOverflow 选项。请参阅示例 here .

否则,您必须自己编写代码来检测该 iframe 中的滚动条并检测它何时到达底部,然后调用 fullpage.js 函数,例如 $.fn.fullpage.moveSectionDown() .

关于javascript - Fullpage js 停止在 iframe 内滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46722777/

相关文章:

javascript - Vue.js 将刚刚创建的数据从子组件传递到父组件

javascript - jQuery 表格排序器 : How to disable sorting on a column by using a class instead of "inline JSON"?

javascript - 子任务完成后让 grunt 运行任务

javascript - 怎么把navbar-brand放在左边,ul navbar-pills li放在右边?

jquery - 从 bootstrap popover 调用 jquery 函数

jquery - 使用 jQuery Sortables 拖动项目时单选按钮被取消选择

html - CSS 适用于 chrome 开发者工具,但不适用于实际的移动设备

html - Bootstrap - 如何确保移动设备上最左边和最右边的空白

html - 如果使用 iPhone 与 Android,则加载不同的网页

javascript - Node JS 中的原型(prototype)继承