我一直在努力让Ram Swaroop's animateScroll.js与Telerik's AppBuilder一起使用。
我需要animateScroll的精细控制，例如前后滚动事件处理，动画缓动和可控制的滚动速度（！）。但是，无论我做什么，滚动行为实际上都不会发生，即使animateScroll的工作（第162行）的jquery animate代码似乎确实触发了，正如我通过用console.log进行检测所知道的那样。 。
为了清楚起见，我所追求的行为是ananimatescroll中的方法，该方法是在现有元素内滚动，而不是滚动整个页面的默认行为。通过将包含元素作为参数来实现元素内的滚动。有效地，此方法将任意包含div转换为“ scroller”，并且可以在参数部分下的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));
最佳答案
该问题似乎是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?
我可以通过添加以下内容来获得animatescroll行为以开始运行
对我来说，最简单的解决方法是向容器div添加内联样式，因此上面代码片段中的element-demo变为：
<div id="element-demo" style="height : 500px; overflow : auto;">
希望我可以将其与其他动态生成的位一起使用...如果发现更多有用的信息，我会报告。
除答案外
经过更多的戳戳和刺探之后，我发现了另一个问题并进行了修复。
我非常确定animatescroll.js库中有一个错误。特别是，该选项允许您相对于指定的元素滚动，而不是滚动到窗口或文档顶部的默认行为。在当前代码中，使用了option元素，但没有完全使用它-animatescroll.js当前假定element选项是要滚动到的元素的直接DOM父级。就我而言，我正在滚动到一个跨度，该跨度在p元素内，而在实际的“ 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存储库。