scrollIntoView не работает в Chrome, но прекрасно работает в Firefox - PullRequest
Новая
       38

scrollIntoView не работает в Chrome, но прекрасно работает в Firefox

0 голосов
/ 21 марта 2019

Я обнаружил проблему, связанную с 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'}), поэтому прокрутка не работает.

Ответы [ 2 ]

0 голосов
/ 10 июля 2019

Chrome не принимает все параметры в методе scrollIntoView.Я столкнулся с подобной проблемой и обнаружил, что если вы измените значения этих параметров, похоже, что они работают нормально. 

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

Приведенный выше фрагмент кода работает для прокрутки элемента по горизонтали

См. Раздел совместимости браузера в MDN для scrollIntoView

0 голосов
/ 21 марта 2019

Вы не сказали, что ожидаете, но ваш кодовый блок, кажется, работает нормально для меня. После каждой прокрутки колесика мыши появляется следующий раздел.

Это с Chrome 73.0.3683.86 в Ubuntu.

...