Google Closure 相当于 jQuery $('html,body').animate({scrollTop: 800});答案

【问题标题】：Google Closure equivalent to jQuery $('html,body').animate({scrollTop: 800});Google Closure 相当于 jQuery $('html,body').animate({scrollTop: 800});
【发布时间】：2014-04-04 21:15:36
【问题描述】：

有问题的代码使页面滚动到页面上的特定点。正如标题所说，我希望 Google Closure 等同于以下 jQuery：

$('html,body').animate({scrollTop: 800});

它说here html, body 允许浏览器不一致，而$(document) 是等效的。

我尝试了以下方法：

var anim = new goog.fx.dom.Scroll(document, [0, 0], [0, 800], 400);
anim.play();

我也试过document.body。

goog.fx.dom.Scroll 在网络上没有演示，而且信息非常缺乏。

【问题讨论】：

我假设基于 api 您需要调用它两次，一次使用 document.body，再次使用 document.querySelector("html")，但我从未使用过该库。
你最好问问closure-library-discuss@
@John 感谢您的建议 :)
为了记录，我最终通过使用 Chris Ferdinandi 的 jQuery 平滑滚动插件的修改、硬编码、de-jQueried 版本来使用 Vanilla。

标签： javascript jquery animation scroll google-closure

【解决方案1】：

使这个 goog.fx.Scroll 类与文档（正文或 HTML）一起工作的方法是通过这种方式传递文档滚动元素：

/**
 * Document scroll element obtained from goog.dom
 * @type {Element}
 * @private
 */
let documentScrollElement_ = goog.dom.getDocumentScrollElement()

/**
 * Function triggered by any target to start scrolling
 * @param  {Event} e Triggered event
 * @private
 */
function scrollTrigger_(e) {
  let googScroll = new goog.fx.dom.Scroll(
    this.documentScrollElement_,
    [0, 0],
    [0, 800],
    400);

  googScroll.play();
}

你知道 Scroll 类有这个可选参数来为滚动添加缓动。你应该像这样新建类：

let googScroll = new goog.fx.dom.Scroll(
    this.documentScrollElement_,
    [0, 0],
    [0, 800],
    400,
    goog.fx.easing.inAndOut(t)); // Note that you need to import or require the goog.fx.easing object

我知道这是一个老问题，但我遇到了同样的问题并设法使它工作，所以我认为回答这个问题是值得的。

希望对你有帮助！

【讨论】：

【解决方案2】：

查看source code 如果您使用document.body 并且您没有对样式做任何奇怪的事情，这应该可以工作，但是您需要调试才能找到问题。

从手动更改document.body.scrollTop 开始，如果这不起作用，此滚动动画将无能为力。

另外，在goog.fx.dom.Scroll.prototype.updateStyle 和goog.fx.Animation.prototype.play 中放置一个断点，看看它们是否触发以及会发生什么。

玩得开心。

【讨论】：