最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - scrollIntoView not working on Chrome but perfeclty fine in Firefox - Stack Overflow

programmeradmin1浏览0评论

I've encoutnered a problem concerning scrollIntoView. The code I wrote works on Firefox, but not on Chrome. I'am not getting any errors or anything from console therefore I don't know what's the problem. How to run it correctly on Chrome? I would like to solve it in Vanilla JS

Here's my code ->

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 });

When codepen's console is open console.log() crashes scrollIntoView({behavior: 'smooth'}), thus scroll is not working.

I've encoutnered a problem concerning scrollIntoView. The code I wrote works on Firefox, but not on Chrome. I'am not getting any errors or anything from console therefore I don't know what's the problem. How to run it correctly on Chrome? I would like to solve it in Vanilla JS

Here's my code -> 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 });

When codepen's console is open console.log() crashes scrollIntoView({behavior: 'smooth'}), thus scroll is not working.

Share Improve this question edited May 28, 2019 at 12:58 Rafał asked Mar 21, 2019 at 8:41 RafałRafał 1181 silver badge9 bronze badges 1
  • I have default settings for both Chrome and Firefox. – Rafał Commented Mar 21, 2019 at 9:18
Add a ment  | 

3 Answers 3

Reset to default 5

I don't know why, but i had problems with { behavior: 'smooth' }

Call just scrollIntoView()

You didn't say what you're expecting to happen, but your codepen seems to work fine for me. After each scroll down of the mouse wheel the next section slides into view.

This is with Chrome 73.0.3683.86 on Ubuntu.

Chrome doesn't accept all the options in the scrollIntoView method. I faced the similar issue and found out if you change the values of these options it seems to be working fine.

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

Above snippet is working for me to scroll the element horizontally

Refer the browser patibility section in the MDN for scrollIntoView

发布评论

评论列表(0)

  1. 暂无评论