scrollIntoView在Chrome上不起作用，但在Firefox中表现良好

Question

我已经解决了关于scrollIntoView的问题。我编写的代码适用于Firefox，但不适用于Chrome。我没有从控制台收到任何错误或任何东西，因此我不知道有什么问题。如何在Chrome上正确运行它？我想用香草JS解决它

这是我的代码 -> https://codepen.io/Rafi-R/pen/PLdvjO

const body = document.querySelector('body');
const links = document.querySelectorAll(".link");
let section = 0;
const scrollDirection = e => e.wheelDelta ? e.wheelDelta : -1 * e.deltaY;
const scrollToSection = e => {
e.preventDefault();
section = 
scrollDirection(e) < 0 
? (section + 1 >= links.length - 1 ? section = links.length - 1 : section + 1) 
: (section - 1 <= 0 ? section = 0 : section - 1);   
let element = document.querySelector(links[section].getAttribute("href"));
scrollToTheView(element);
}
const scrollToTheView = el => {
el.scrollIntoView({ behavior: 'smooth' });
console.log(el, links[section].getAttribute("href"), section)
}
body.addEventListener('wheel', scrollToSection, { passive: false });

当 codepen 的控制台打开时console.log()崩溃scrollIntoView({behavior: 'smooth'})，因此滚动不起作用。

Answer 1

我不知道为什么，但我在{ behavior: 'smooth' }

只打电话scrollIntoView()

Answer 2

你没有说你期望会发生什么，但你的代码笔似乎对我来说很好用。每次向下滚动鼠标滚轮后，下一部分将滑入视图。

这是在Ubuntu上的Chrome 73.0.3683.86。

Answer 3

Chrome 不接受scrollIntoView方法中的所有选项。我遇到了类似的问题，发现如果您更改这些选项的值，它似乎工作正常。

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });

上面的代码片段正在为我水平滚动元素

请参阅 MDN 中的浏览器兼容性部分以获取scrollIntoView