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

Question

我正在为我的网站使用 fullpage.js。关于 fullpage.js 一切正常。我想在点击 pagniation 时打开 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 属性。请帮帮我。

Answer 1

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

scrollOverflow:

(default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPage.js plugin. For example:

然后，fullPage.js 正在计算您的部分在页面加载时的高度。如果视频未在页面加载时显示，fullPage.js 在您告知之前不会知道内容正在更改。

试试这个：

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

有关文档中 reBuild method 的更多信息：

reBuild()

Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site.

See this example I made for you

Answer 2

我发现这个有效

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

对我来说这没用

$.fn.fullpage.reBuild();

Answer 3

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

我在 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>
            );
        }
      }
/>

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

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

html

javascript

jquery

fullpage.js