JavaScript无法在数字'100'上创建属性'guid'

Question

我试图通过单击链接来模拟画布元素上的滚动。

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)

我一直在这里遵循示例 https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

Answer 1

首先，$('.vis-network canvas')既不是window也不是HTMLElement-它是jQuery对象。尽管此对象具有scroll方法（在其原型链中），但它却执行了completely different：

  

此方法是第一个.on( "scroll", handler )的快捷方式   和第二个变体，以及.trigger( "scroll" )在第三个变体中。

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

您可能正在寻找这个：

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

...但是您尝试滚动子级（内容）而不是父级看起来很奇怪。也许您实际上应该改为定位$('.vis-network')。