Javascript 如何使滚动条在下面的情况下看到完整的内容？

请参阅我正在使用的框架的演示url：

但是，使用上面几乎相同的代码， 当我尝试实现下面的效果时，标题文本被从滑块中排除。（标题文本为静态，内容为滑动）

我无法滚动查看所有内容；实现这种效果的最佳代码是什么

如果我想使用top框架，我必须对它的核心功能进行大量的修改吗？

---

如果没有破解顶级动画框架，还有什么其他建议可以达到这一效果呢？

看起来插件计算的fp滚动高度不正确。至少在您的用例中。我只需手动将fp scrollable的height属性调整为较小的值（显然这不是一个长期修复，只是为了测试而做的事情），就可以让它看起来不错。我不确定计算时是否考虑了你的字体大小，以及诸如此类的事情，所以这可能会影响它

如果你想破解这个插件，通常你需要修改的地方是相当有限的，不会太糟糕。从github页面

您所需要做的就是修复放置在scrollHeight变量中的值。我不确定它在计算卷轴高度时没有考虑什么（在你的情况下，卷轴高度需要更小，它太大了），但我认为这是一个练习，你可以先试试你的手：）我得上床睡觉了

您可能还需要搞乱contentHeight的计算，因为表面上您将缩小scrollHeight，并且脚本仅在内容大于滚动条时才将滚动条放在那里

    function createSlimScrolling(element){
        //needed to make `scrollHeight` work under Opera 12
        element.css('overflow', 'hidden');

        //in case element is a slide
        var section = element.closest('.fp-section');
        var scrollable = element.find('.fp-scrollable');

        //if there was scroll, the contentHeight will be the one in the scrollable section
        if(scrollable.length){
            var contentHeight = scrollable.get(0).scrollHeight;
        }else{
            var contentHeight = element.get(0).scrollHeight;
            if(options.verticalCentered){
                contentHeight = element.find('.fp-tableCell').get(0).scrollHeight;
            }
        }

        var scrollHeight = windowsHeight - parseInt(section.css('padding-bottom')) - parseInt(section.css('padding-top'));

        //needs scroll?
        if ( contentHeight > scrollHeight) {
            //was there already an scroll ? Updating it
            if(scrollable.length){
                scrollable.css('height', scrollHeight + 'px').parent().css('height', scrollHeight + 'px');
            }
            //creating the scrolling
            else{
                if(options.verticalCentered){
                    element.find('.fp-tableCell').wrapInner('<div class="fp-scrollable" />');
                }else{
                    element.wrapInner('<div class="fp-scrollable" />');
                }

                element.find('.fp-scrollable').slimScroll({
                    allowPageScroll: true,
                    height: scrollHeight + 'px',
                    size: '10px',
                    alwaysVisible: true
                });
            }
        }

        //removing the scrolling when it is not necessary anymore
        else{
            removeSlimScroll(element);
        }

        //undo
        element.css('overflow', '');
    }

函数createSlimScrolling（元素）{
//需要使“滚动高度”在Opera 12下工作
css（'overflow'，'hidden'）；
//如果元素是幻灯片
var section=element.closest（'.fp section'）；
var scrollable=element.find（'.fp scrollable'）；
//如果有滚动，则contentHeight将是可滚动部分中的一个
if（可滚动的.length）{
var contentHeight=scrollable.get（0）.scrollHeight；
}否则{
var contentHeight=element.get（0）.scrollHeight；
如果（选项。垂直居中）{
contentHeight=element.find（'.fp tableCell'）.get（0）.scrollHeight；
}
}
var scrollHeight=windowsHeight-parseInt（section.css（'padding-bottom'））-parseInt（section.css（'padding-top'））；
//需要卷轴吗？
如果（内容高度>滚动高度）{
//已经有卷轴了吗？正在更新它
if（可滚动的.length）{
css（'height'，scrollHeight+'px'）.parent（）.css（'height'，scrollHeight+'px'）；
}
//创建滚动条
否则{
如果（选项。垂直居中）{
元素.find（'.fp tableCell'）.wrapInner（''）；
}否则{
元素wrapInner（“”）；
}
元素.find（'.fp scrollable'）.slimScroll({
allowPageScroll:true，
高度：滚动高度+px，
尺寸：“10px”，
总是看得见：是的
});
}
}
//不再需要滚动时删除滚动
否则{
移除卷轴（元素）；
}
//撤消
css（'overflow'，''）；
}

使用

绝对

定位元素作为标题。Fullpage.js计算

幻灯片中内容的高度。（假设它们是全高的…）。
如果您在任何幻灯片外放置任何东西，则必须绝对定位

看看我提出的解决方案：

我在您的标题中添加了以下样式：

#demo{
    position:absolute;
    top:50px;
    margin: 0;
    left:0;
    right:0;
    text-align:center;
}

你用的是什么浏览器？当你说滚动时，你的意思是你左右翻页吗？我似乎能看到所有幻灯片1-4。当我将鼠标放在幻灯片1和幻灯片2上的滚动条的中间div上时，我可以使用滚轮向下滚动，并分别查看幻灯片1和幻灯片2上的其余内容。我使用的是Chrome。嗨，@Jazzepi，我认为它与浏览器无关，但取决于设备高度，因为插件会动态计算部分高度，如果你使用高分辨率和巨大的设备高度来查看它，可能没有滚动条，可以看到所有内容，但只要你以较低的高度调整窗口大小，溢出部分无法通过滚动查看（因为它在滚动部分之外）。在第一张幻灯片中，我将第1行写到第30行，但是当您将设备高度调整为较低的浏览器高度值时，您只能看到部分但不能看到全部。我注意到了这一点，但我之所以对破解插件核心非常谨慎，是因为只要我使用“scrollOverflow:true”选项，不仅是滑块部分，每个滚动部分也可能启动createSlimScrolling功能。这对我做出黑客决定有点混乱。无论如何，谢谢，好好休息。
#demo{
    position:absolute;
    top:50px;
    margin: 0;
    left:0;
    right:0;
    text-align:center;
}