Question

请参阅我正在使用的框架的演示网址：http://alvarotrigo.com/fullPage/examples/navigationH.html#secondPage

但是，使用几乎相同类型的代码，当我试图达到以下效果，其中标题文本从滑块中排除。（标题文本是静态的，内容是滑动的）

jsfiddle url: http://jsfiddle.net/097wvnot/8/

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

如果我想使用顶级框架，我必须对其核心功能进行大量修改吗？如果不是攻击顶级动画框架，那么其他建议是什么呢？

Answer 1

使用absolute定位元素作为标题。 Fullpage.js计算slide元素内容的高度。（因为他们认为是全高......）。如果您在任何幻灯片之外放置任何东西，则必须将其置于绝对位置。

看看我建议的解决方案：http://jsfiddle.net/097wvnot/11/

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

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

Answer 2

看起来插件正在不正确地计算fp-scrollable的高度。至少对你的用例而言。我只需手动将fp-scrollable的height属性调整到较小的数量就可以让它看起来很好（显然这不是一个长期修复，只是我正在做的测试）。我不确定计算是否考虑了你的字体大小等等，这可能会影响它。

如果您想破解插件，通常您需要进行更改的地方相当受限制，并且不会太糟糕。来自github页面。 https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js

您需要做的就是修复放入scrollHeight变量的值。我不确定滚动高度计算中究竟是什么（滚动高度在你的情况下需要更小，它太大了），但我认为这样做了一个练习，你可以先试试你的手:)我必须睡觉zz

你也可能需要搞乱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', '');
    }

如何让滚动条在下面的案例中查看完整内容？

2 个答案: