jQuery jScrollpane的scrollToElement [英] jQuery jScrollpane's scrollToElement

问题描述

我想在这里使用jScrollPane的scrollToElementAPI函数：

I'm looking to use jScrollPane's "scrollToElement" API function here:

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

有关它的使用说明，请点击此处：

Instructions on it's usage can be found here:

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

我遇到的问题是stickToTop参数。单击箭头时，我希望它将目标div带到视口的顶部（不仅仅是它当前正在进行的几乎不可见）。 stickToTop参数应该是处理这个，但我不能让它工作。

The issue I'm having is with the "stickToTop" argument. When clicking the arrows, I want it to bring the targeted div to the top of the viewport (not just barely visible as it's currently doing). The "stickToTop" argument is supposed to be handling this, but I can't get it to work.

我试过实现如下，但没有运气：

I've tried implementing this as follows, but with no luck:

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

我尝试过：

api.scrollToElement(target_div_id, true);

这是我目前的完整代码：

here's my current full code:

$(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方法的任何帮助都会很多赞赏！

ANY help on how to get jScrollPane's "stickToTop" argument to workfor the "scrollToElement" method would be MUCH appreciated!

推荐答案

你的代码一般都运行正常，之所以看起来 stickToTop 选项不是，是投标-X div的css。

Your code is working fine in general, the reason why it seems that the stickToTop option isn't, is the css for the proposal-X divs.

stickToTop 会滚动这些div，使它们位于页面的顶部，但是要确定它们的上边缘它使用 margin-top 和 padding-top 值。因此，在滚动后，它显示为* target_div_id * div的上边缘不在页面的顶部（这不是真的）。这就是jScrollpane，它考虑了保证金和填充的价值。

stickToTop does scroll those divs so they are at the top of the page, BUT to determine their upper edge it uses margin-top and padding-top values. So after the scroll it appears as the top edge of the *target_div_id* div isn't at the top of the page (which isn't true). It is, it's just jScrollpane that take values of margin and padding into consideration.

这个问题的解决方案很简单，包括提案 - X除了另一个div（假设有一个类 .proposal-wrapper 。然后将css margin-top和padding-top定义从提议div移动到 .proposal-wrapper <的定义/ em> class。

The solution for this problem is simple, wrap the proposal-X divs in yet another div (lets say with a class .proposal-wrapper. Then move the css margin-top and padding-top definitions from proposal divs to definition of .proposal-wrapper class.

这篇关于jQuery jScrollpane的scrollToElement的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！