Javascript 无法在编号 'guid' 上创建属性 '100'

Question

我试图通过单击链接来触发 canvas 元素上的 scroll 操作。

以下是我一直关注的示例:https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

---

JS:

$('#zoom-in-button').click(function() {
    $('.vis-network canvas').scroll(0, 100);
    // $('.vis-network canvas').scroll({top: 1000});
});

HTML:

<a id="zoom-in-button" class="nav-button">
    +
</a>
<div class="vis-network">
    <canvas style="overflow:auto">
</div>

---

错误:

jquery.min.js:2 Uncaught TypeError: Cannot create property 'guid' on number '100'
    at Object.add (jquery.min.js:2)

Answer 1

首先，$('.vis-network canvas') 既不是 window 也不是 HTMLElement - 它是 jQuery 对象。虽然这个对象有 scroll 方法(在它的原型(prototype)链中)，但它做了一些事情 completely different :

This method is a shortcut for .on( "scroll", handler ) in the first and second variations, and .trigger( "scroll" ) in the third.

请注意，第三种情况不允许您参数化事件。

您可能正在寻找这个:

var canvas = $('.vis-network canvas')[0];
canvas.scrollLeft = 0;
canvas.scrollTop = 100;

...但是您尝试滚动子项(内容)而不是父项看起来很奇怪。也许您实际上应该以 $('.vis-network') 为目标。