jQuery jScrollpane 的scrollToElement

Question

我希望在这里使用 jScrollPane 的“scrollToElement”API 函数:

http://dextersgospel.com/index-test.html

可以在此处找到有关其使用说明:

http://jscrollpane.kelvinluck.com/api.html#scrollTo

我遇到的问题是“stickToTop”参数。单击箭头时，我希望它将目标 div 带到视口(viewport)的顶部(而不仅仅是像当前那样几乎不可见)。 “stickToTop”参数应该可以处理这个问题，但我无法让它工作。

我尝试按如下方式实现这一点，但没有成功:

api.scrollToElement(target_div_id, {stickToTop: true});

我已经尝试过:

api.scrollToElement(target_div_id, true);

这是我当前的完整代码:

$(function()
{
    /* INITIALIZES jScrollPane on ENTIRE BROWSER WINDOW */
    var win = $(window);
    var isResizing = false;
    var container = $('#full-page-container');
    win.bind(
        'resize',
        function()
        {
            if (!isResizing) {
                isResizing = true;
                // Temporarily make the container tiny so it doesn't influence the
                // calculation of the size of the document
                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );
                // Now make it the size of the window...
                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane(
                    {
                        'showArrows':          false,
                        'mouseWheelSpeed':     75,
                        'contentWidth':        960, //So content doesn't jump around
                        'animateScroll':       true,
                        'animateDuration':     600,
                        'hijackInternalLinks': true //HAD TO HAVE THIS FOR ANCHORS TO WORK!
                    }
                );
            } 
        }
    ).trigger('resize');

    //Awesome scrollToY function for our duct tape arrows - no flicker + built w/jScrollPane
    var api = container.data('jsp');
    $('.proposal').bind(
        'click',
        function()
        {
            var target_div_id = '#' + $(this).attr("title"); // gives you the TITLE of the clicked link
            api.scrollToElement(target_div_id, true);
            return false;
        }
    );
});

任何关于如何让 jScrollPane 的“stickToTop”参数适用于“scrollToElement”方法的帮助将非常感激!

Answer 1

您的代码总体工作正常，stickToTop选项似乎不起作用的原因是proposal-X div的css。

stickToTop 会滚​​动这些 div，使它们位于页面顶部，但要确定它们的上边缘，它使用 margin-top和 padding-top 值。因此，滚动后，它显示为 *target_div_id* div 的顶部边缘不在页面顶部(这不是真的)。是的，只有 jScrollpane 考虑了 margin 和 padding 的值。

这个问题的解决方案很简单，将proposal-X div包装在另一个div中(假设使用类.proposal-wrapper。然后移动CSS从提案 div 到 .proposal-wrapper 类的定义的 margin-top 和 padding-top 定义。