让 animatescroll.js 在 Phonegap/Cordova/AppBuilder 中工作

Question

我一直在努力让Ram Swaroop's animateScroll.js 与Telerik's AppBuilder 合作。

我需要 animateScroll 的精细控制，例如滚动前后事件处理、动画缓动和可控滚动速度 (!)。但是，无论我做什么，滚动行为实际上都不会发生，即使执行 animateScroll does 工作的 jquery animate 代码（第 162 行）似乎在尽可能近的地方触发通过使用 console.log 进行检测。

要明确我所追求的行为是 animatescroll 中的方法，您在其中滚动 in 现有元素，而不是滚动整个页面的默认行为。在元素内滚动是通过引用包含元素作为参数来实现的。实际上，这种方法将任意包含的 div 转换为“滚动条”，可以在参数部分下的demo 中看到。

我有一个大型 appbuilder 项目，所以我从 Telerik 的演示模板中创建了一个基本上是空的 appbuilder 项目，我得到了相同的结果。我的假设是这个问题也会影响到 Phone 和 Cordova，因为它们非常非常相似。如果有人能够帮助解决这个问题，我会尽我所能在相同的 MIT 许可下将调整后的版本提交到各种 cordova/phonegap 插件目录。这是一个非常棒的滚动条——如果我能让它在混合移动应用环境中工作的话。

任何建议或帮助表示赞赏。下面是非工作演示项目的 Html 代码，然后是 animatescroll 插件的完整源代码。

谢谢， 戴夫·格丁

<div data-role="view" data-title="Home" data-layout="main" data-model="APP.models.home">
<h1 data-bind="html: title"></h1>
<div>
    For Example:<br />
    <div id="element-demo">
        <p>
            <button onclick="$('#last-paragraph').animatescroll({element:'#element-demo',padding:20});">Click here</button> to scroll to the last paragraph within this "div" element
        </p>
        <p>
            This "div" element has a class-name "element-demo" which is the value passed for "element" option while calling the plugin.
        </p>
        <p>
            Compzets.com is India's first open source software and freeware publishing site, Download and Upload Open source software and Freeware relevant to the Paid ones for PC,Mac and Linux.
        </p>
        <p>
            It also makes its own Cloud Applications for making tasks easy. Recently it has launched a new Plugin Showcase too.
        </p>
        <p>
            This website is your source of unprecedented access to all kinds of pc,mac or linux software (Open Source or Freeware only) with detailed coverage of tech infos along with multiple screen shots and moreover you can not only download your favorite gadgets but you can also UPLOAD your own software to reach thousand of audience. Stay connected to all the latest happenings in the gadget world,with regular updates on new software and announcements with the help of our RSS Feed,just at a few clicks!
        </p>
        <p id="last-paragraph">
            The word "Compzets" does not have a literal meaning,it is just derived from the word Gadget which is related to Electronic devices where as Compzets is related to Computer software which are nothing but gadgets for computer.
        </p>
        <p>
            Thanks to <a href="https://plus.google.com/114685591029748634833" target="_blank">Ronan DMP</a> for asking this feature!
        </p>
    </div>
</div>

AND Ram 的 animatescroll 插件代码：

/*
 * @build  : 20-07-2013
 * @author : Ram swaroop
 * @site   : Compzets.com
 */
(function ($) {

    // defines various easing effects
    $.easing['jswing'] = $.easing['swing'];
    $.extend($.easing,
    {
        def: 'easeOutQuad',
        swing: function (x, t, b, c, d) {
            return $.easing[$.easing.def](x, t, b, c, d);
        },
        easeInQuad: function (x, t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOutQuad: function (x, t, b, c, d) {
            return -c * (t /= d) * (t - 2) + b;
        },
        easeInOutQuad: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return -c / 2 * ((--t) * (t - 2) - 1) + b;
        },
        easeInCubic: function (x, t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOutCubic: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOutCubic: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        },
        easeInQuart: function (x, t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOutQuart: function (x, t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOutQuart: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        },
        easeInQuint: function (x, t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOutQuint: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOutQuint: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        },
        easeInSine: function (x, t, b, c, d) {
            return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
        },
        easeOutSine: function (x, t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOutSine: function (x, t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        },
        easeInExpo: function (x, t, b, c, d) {
            return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOutExpo: function (x, t, b, c, d) {
            return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOutExpo: function (x, t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
        },
        easeInCirc: function (x, t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOutCirc: function (x, t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOutCirc: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        },
        easeInElastic: function (x, t, b, c, d) {
            var s = 1.70158; var p = 0; var a = c;
            if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
            if (a < Math.abs(c)) { a = c; var s = p / 4; }
            else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOutElastic: function (x, t, b, c, d) {
            var s = 1.70158; var p = 0; var a = c;
            if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
            if (a < Math.abs(c)) { a = c; var s = p / 4; }
            else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        },
        easeInOutElastic: function (x, t, b, c, d) {
            var s = 1.70158; var p = 0; var a = c;
            if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
            if (a < Math.abs(c)) { a = c; var s = p / 4; }
            else var s = p / (2 * Math.PI) * Math.asin(c / a);
            if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        },
        easeInBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        },
        easeInBounce: function (x, t, b, c, d) {
            return c - $.easing.easeOutBounce(x, d - t, 0, c, d) + b;
        },
        easeOutBounce: function (x, t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOutBounce: function (x, t, b, c, d) {
            if (t < d / 2) return $.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;
            return $.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    });

    $.fn.animatescroll = function (options) {

        // fetches options
        var opts = $.extend({}, $.fn.animatescroll.defaults, options);

        // make sure the callback is a function
        if (typeof opts.onScrollStart == 'function') {
            // brings the scope to the callback
            opts.onScrollStart.call(this);
        }

        if (opts.element == "html,body") {
            // Get the distance of particular id or class from top
            var offset = this.offset().top;

            // Scroll the page to the desired position
            $(opts.element).stop().animate({ scrollTop: offset - opts.padding }, opts.scrollSpeed, opts.easing);
        }
        else {
            // Scroll the element to the desired position
            $(opts.element).stop().animate({ scrollTop: this.offset().top - this.parent().offset().top + this.parent().scrollTop() - opts.padding }, opts.scrollSpeed, opts.easing);

        }

        setTimeout(function () {

            // make sure the callback is a function
            if (typeof opts.onScrollEnd == 'function') {
                // brings the scope to the callback
                opts.onScrollEnd.call(this);
            }
        }, opts.scrollSpeed);
    };

    // default options
    $.fn.animatescroll.defaults = {
        easing: "swing",
        scrollSpeed: 800,
        padding: 0,
        element: "html,body"
    };

    }(jQuery));

Answer 1

这个问题似乎是 Android 中一个已知且长期存在的错误，其中 ScrollTop 无法正常工作。

Stackoverflow 上的更多相关链接：

• The same old issue, .scrollTop(0) not working in Chrome & Safari
  • jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?

我只需添加

就可以让动画滚动行为开始运行

对我来说最简单的解决方法是在容器 div 中添加内联样式，因此上面代码片段中的 element-demo 变为：

<div id="element-demo" style="height : 500px; overflow : auto;">

希望我可以让它与我的其他动态生成的位一起使用...如果我发现任何更有用的东西，我会报告回来。

答案补充 经过更多的戳戳和刺激，我发现了另一个问题并修复了它。

我很确定 animatescroll.js 库中有一个错误。具体来说，该选项允许您相对于指定元素滚动，而不是滚动到窗口或文档顶部的默认行为。在当前代码中，使用了 option 元素，但并未完全使用 - animatescroll.js 当前假定 element 选项是您正在滚动到的元素的 immediate DOM 父级。在我的例子中，我滚动到一个跨度，它位于一个 p 元素内，该元素位于实际的“滚动”元素内 - 包含 div。

所以，在 animatescroll.js 中我改变了这个：

$(opts.element).stop().animate({ scrollTop: this.offset().top - this.parent().offset().top + this.parent().scrollTop() - opts.padding }, opts.scrollSpeed, opts.easing);

到这里：

$(opts.element).stop().animate({ scrollTop: this.offset().top - $(opts.element).offset().top + $(opts.element).scrollTop() - opts.padding }, opts.scrollSpeed, opts.easing);

现在一切都正常了。我已经通知了 animatescroll.js 的作者，所以他可以更新 Git 存储库，假设他同意这种方法。