窗口调整大小后，fullpage.js仅会scrollOverflow [英] fullpage.js will only scrollOverflow after window resize

问题描述

在此处，我有一个fullpage.js网站设置. 第一部分没有scrollOverflow，但是第二部分是一个网格(使用gridify生成)，需要(在某些屏幕尺寸上)它才能成为可滚动部分.

I have a fullpage.js site setup here. The first section has no scrollOverflow, but the second section is a grid (generated using gridify), which requires (on certain screen sizes), for it to be a scrollable section.

问题是它拒绝滚动.但是，如果我调整窗口的大小(甚至在任何方向上按单个像素调整大小)，那么针对该部分都会显示fullpage.js滚动条.

The problem is it refuses to scroll. However, if I resize the window (even by a single pixel in any direction), then the fullpage.js scrollbar will appear for that section.

有人知道为什么fullpage.js这样行吗?以及如何在不手动调整窗口大小的情况下使滚动条显示在该部分中?

Does anyone have any idea why fullpage.js is acting this way? And how can I get the scrollbar to appear in that section without having the resize the window manually?

值得注意的是，我已经能够使用fullpage.js示例页面的scrollOverflow来获得相同的效果.就是在此处进行设置.但是，我无法弄清楚它为什么能在这里工作，但无法在我的原始页面中找到答案！

It's worth noting, I've been able to get the same thing working using the fullpage.js example page for scrollOverflow. That is setup right here. However, I haven't been able to figure out why it works there, but not in my original page!

推荐答案

这可能是因为在初始化fullPage.js之后生成(或以某种方式修改了)您的部分或幻灯片的内容.

That's probably because the content of your section or slide is being generated (or modified somehow) after fullPage.js gets initialized.

您应该在afterRender回调> fullPage.js文档详细信息内部使用了该javascript代码:

afterRender()

此回调在页面结构刚被触发后被触发 生成的. 这是您要用来初始化其他回调的回调 插件或触发任何要求文档准备就绪的代码(如 该插件修改DOM来创建结果结构.

This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).

无论如何，我相信您可以通过调用fullPage.js提供的方法reBuild来解决它. 您可以尝试在afterRender回调中使用它，或者直接在用于生成要应用scrollOverflow选项的部分的布局/内容的代码之后使用它.

In any case, I believe you can solve it by calling the method reBuild provided by fullPage.js. You can try to use it in the afterRender callback or directly after the code you use to generate the layout/content of the section to which you want to apply the scrollOverflow option.

$('#fullpage').fullpage({
    //your options
});

//code used to generate the content of your section 
//...

//re-building fullPage.js to detect the current content of each section
$.fn.fullpage.reBuild();

如果这不起作用，您始终可以尝试使用超时，该超时也应解决一些延迟:

If that doesn't work, you can always try to use a timeout which should also solve it with some delay:

setTimeout(function(){
    $.fn.fullpage.reBuild();
}, 1000);

这篇关于窗口调整大小后，fullpage.js仅会scrollOverflow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！