1

我遇到了一个关于 scrollIntoView 的问题。我编写的代码适用于 Firefox，但不适用于 Chrome。我没有从控制台收到任何错误或任何东西，因此我不知道问题出在哪里。如何在 Chrome 上正确运行它？我想用 Vanilla 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'})，因此滚动不起作用。

4

2 回答 2

0

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

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

上面的代码片段可以让我水平滚动元素

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

于 2019-07-10T05:03:16.177 回答
0

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

这是 Ubuntu 上的 Chrome 73.0.3683.86。

于 2019-03-21T09:08:07.830 回答