Question

有问题的代码会将页面滚动到页面上的特定点。正如标题所说，我希望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没有演示和惨淡的信息缺失。

Answer 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

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

希望它有所帮助！

Answer 2

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

首先手动更改document.body.scrollTop，如果这不起作用，则此滚动动画无法对其执行任何操作。

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

玩得开心。

Google Closure相当于jQuery $（'html，body'）。animate（{scrollTop：800}）;

2 个答案: