Question

我在我的网站上使用fullpage.js。关于fullpage.js一切正常。我想点击一下pagniation打开一个div。我可以打开包含YouTube视频的点击内容。但当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 code：

<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中添加视频滚动停止工作。我没有为overflow设置#text属性。请帮帮我。

Answer 1

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

scrollOverflow：

（默认为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 method的更多信息：

<强>重建（）

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

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();

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

2 个答案: