我一直在努力获取 Ram Swaroop's animateScroll.js与 Telerik's AppBuilder 一起工作。
我需要 animateScroll 的精细控制，例如滚动前和滚动后事件处理、动画缓动和可控滚动速度(!)。然而，无论我做什么，滚动行为实际上都不会发生，即使执行 animateScroll 工作(第 162 行)的 jquery 动画代码 确实 似乎会尽可能地触发通过使用 console.log 进行检测来判断。
要明确的是，我所追求的行为是 animatescroll 中的方法，您在现有元素内滚动，而不是滚动整个页面的默认行为。通过引用包含元素作为参数来实现元素内的滚动。实际上，这种方法将任意包含的 div 变成了“滚动条”，可以在 demo 中看到。在参数部分下。
我有一个大型应用程序构建器项目，因此我从 Telerik 的演示模板创建了一个基本上空的应用程序构建器项目，并且得到了相同的结果。我的假设是这个问题也会影响 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>
还有 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 上的更多相关链接:
我只需添加
即可让 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 存储库(假设他同意这种方法)。
关于javascript - 让 animatescroll.js 在 Phonegap/Cordova/AppBuilder 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26833752/