控制台报‘scrollIntoView() is not a function’错误的原因及解决办法

你遇到的Uncaught TypeError是因为用jQuery选择器拿到的是jQuery包装对象，而非原生DOM元素，而scrollIntoView()是原生DOM元素的专属方法，jQuery对象无法直接调用它。同理，addEventListener()也是原生方法，jQuery对象用这个方法也会报错。

下面是两种可行的解决方式：

方式一：提取原生DOM元素再调用方法 #

从jQuery对象中取出对应的原生DOM元素，有两种常用方式：

• 通过索引[0]获取第一个匹配的元素
• 调用jQuery的.get(0)方法获取原生元素

修改后的代码：

// 获取第一个匹配的原生DOM元素
let eleOne = jQuery('.ribe-insurance-tnc-footnote-container')[0];
let eleTwo = jQuery('button.ribe-btn-primary.ribe-page-step-btn.ribe-continueBar-continueBtn')[0];

// 现在可以正常调用原生方法
eleTwo.addEventListener('click', ()=> {
  eleOne.scrollIntoView(true);
});

方式二：全程使用jQuery语法绑定事件 #

如果更习惯jQuery的写法，可以用.on()方法绑定点击事件，再在回调里提取原生元素调用scrollIntoView()：

let eleOne = jQuery('.ribe-insurance-tnc-footnote-container');
let eleTwo = jQuery('button.ribe-btn-primary.ribe-page-step-btn.ribe-continueBar-continueBtn');

eleTwo.on('click', ()=> {
  eleOne[0].scrollIntoView(true);
});

额外说明：如果选择器匹配多个元素 #

如果你的选择器会匹配多个元素，想给所有元素执行滚动操作，可以用.each()遍历：

let eleOneList = jQuery('.ribe-insurance-tnc-footnote-container');
let eleTwo = jQuery('button.ribe-btn-primary.ribe-page-step-btn.ribe-continueBar-continueBtn')[0];

eleTwo.addEventListener('click', ()=> {
  eleOneList.each(function() {
    // 这里的this是当前遍历到的原生DOM元素
    this.scrollIntoView(true);
  });
});

内容的提问来源于stack exchange，提问作者Jane Lim