fullPage.js在使用scrollOverflow时未检测到动态生成内容的高度

fullPage.js not detecting height of dynamic generated content when using scrollOverflow

本文关键字：动态 高度 检测 js scrollOverflow fullPage      更新时间：2024-05-10

我的网站使用fullpage.js。关于fullpage.js一切正常。我想在点击分页时打开一个div。我可以点击打开包含YouTube视频的div。但当div可见时，浏览器滚动将被禁用，我不会出错。

这是我的代码示例：

$(document).ready(function() {
        $('#fullpage').fullpage({
            verticalCentered: false,
            css3:false,
            navigation: true,
            normalScrollElements: '.text',
            navigationTooltips: ['tooltip1', 'tooltip2', 'tooltip3'],
            onLeave: function(index, nextIndex, direction){
                var prevIndex = index - 1;
                var currentIndex = nextIndex - 1;
                $('#section'+currentIndex).css('transform', 'scale(1.2)');
                $('#section'+currentIndex).css('transition', 'all 5s ease-in');
                setTimeout(function(){
                    $('#section'+prevIndex).css('transform', 'scale(1)');
                    $('#section'+prevIndex).css('transition', 'all 0.2s ease-in');
                },500);
            },
        });
    });

在jquery.fullpage.js 中

var li = '<li><a href="#' + link + '" onclick="displayDetails('+i+');"><span>' + tooltip + '</span></a>';

功能：

function displayDetails(id)
  {
    $('#text').show();
  }

HTML代码：

<style>
#text {
    position: absolute;
    display:none;
    z-index:999;
    top: 300px;
    width:100%;
    height: auto;
}
</style>
<div id="text">
  <iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/6iNFimn4wFA" frameborder="0" allowfullscreen></iframe>
  <iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/jsd-mNTIukM" frameborder="0" allowfullscreen></iframe><br>
  <iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/ylD-WFvRZkM" frameborder="0" allowfullscreen></iframe>
  <iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/g2YzRTAstPo" frameborder="0" allowfullscreen></iframe><br>
  <iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/98NqtVG-hFU" frameborder="0" allowfullscreen></iframe>
  <iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/O4weBTRCFzU" frameborder="0" allowfullscreen></iframe><br>
  <iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/UVzEOsHT7XA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="fullpage">    
   <div class="section" id="section0"></div>
   <div class="section" id="section1"></div>
   <div class="section" id="section2"></div>
   <div class="section" id="section3"></div>
   <div class="section" id="section4"></div>
</div>

这段代码按预期打开div，但滚动查看最后的内容不起作用。而不是视频，如果我输入文本滚动工作得很完美。一旦我在div中添加视频，滚动就停止工作。我还没有为#text设置overflow属性。请帮帮我。

我发现这个有效

function testing(){
    //forcing fullPage.js to recalculate dimensions.
    setTimeout(function(){
        fullpage_api.reBuild(); 
    }, 500);
};

对我来说，这不起作用

$.fn.fullpage.reBuild();

首先，应该使用scrollOverflow:true而不是normalScrollElements。

滚动溢出：

（默认值false）定义是否为该节创建滚动，以防其内容大于其高度。设置为true时，插件将包装您的内容。请考虑使用委派或在afterRender回调中加载其他脚本。如果将其设置为true，则需要供应商插件jquery.slimscroll.min，并且应该在fullPage.js插件之前加载它。例如：

然后，fullPage.js正在计算页面加载时各部分的高度。如果视频没有在页面加载中显示，fullPage.js将不会知道内容正在更改，除非你告诉它

试试这个：

function displayDetails(id){
    $('#text').show();
    
   //forcing fullPage.js to recalculate dimensions.
    $.fn.fullpage.reBuild(); 
}

关于文档中reBuild方法的更多信息：

reBuild（）

更新DOM结构以适应新窗口大小或其内容。非常适合与AJAX调用或网站的DOM结构。

请参阅我为您制作的

示例

对于react用户来说，这是我找到的最有效的解决方案。您需要在状态中保存render方法中的fullpageApi。然后，利用useEffect调用重建方法。

我在render()中使用了它，但后来我得到了很多奇怪的行为，因为每隔一次页面状态更新都会调用rebuild()。

const [fullPageApi, setFullPageApi] = useState<fullpageApi>();
useEffect(() => {
    if (fullPageApi){
        setTimeout(function () {
            fullPageApi.reBuild();
        }, 1000);
    }
}, [fullPageApi]);
// (...)
// Component example
<ReactFullpage
    scrollOverflow
    navigation
    render={({ fullpageApi }) => {
        if (!fullPageApi) setFullPageApi(fullpageApi);
            return (
                <ReactFullpage.Wrapper>
                    <YourComponent />
                </ReactFullpage.Wrapper>
            );
        }
      }
/>
相关文章：