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

Question

我一直在努力讓Ram Swaroop的animateScroll.js與Telerik的AppBuilder一起使用 。

我需要對animateScroll進行精細控制，例如前后滾動事件處理，動畫緩動和可控制的滾動速度（！）。 但是，無論我做什么，滾動行為實際上都不會發生，即使animateScroll的工作（第162行）的jquery animate代碼似乎確實觸發了，正如我通過用console.log進行檢測所知道的那樣。 。

為了清楚起見，我所追求的行為是ananimatescroll中的方法，該方法是在現有元素內滾動，而不是滾動整個頁面的默認行為。 通過將包含元素作為參數來實現元素內的滾動。 有效地，此方法將任意包含div轉換為“ scroller”，並且可以在演示中的參數部分看到。

我有一個大的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的更多相關鏈接：

• 相同的舊問題，.scrollTop（0）在Chrome和Safari中不起作用
  • jQuery scrollTop（）在移動瀏覽器上的DIV滾動中不起作用嗎？

我可以通過添加以下內容來獲得animatescroll行為以開始運行

對我而言，最簡單的解決方法是向容器div添加內聯樣式，因此上面代碼片段中的element-demo變為：

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

希望我可以將其與其他動態生成的位一起使用...如果發現更多有用的信息，我會報告。

附加答案經過更多的戳戳和刺激之后，我發現了另一個問題並進行了修復。

我很確定animatescroll.js庫中有一個錯誤。 特別是，該選項允許您相對於指定的元素滾動，而不是滾動到窗口或文檔頂部的默認行為。 在當前代碼中，使用了option元素，但並未完全使用-animatescroll.js當前假定element選項是要滾動到的元素的直接 DOM父級。 就我而言，我正在滾動到一個跨度，該跨度在ap元素內，而在實際的“ scroller”元素內-包含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存儲庫。