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.
- I have default settings for both Chrome and Firefox. – Rafał Commented Mar 21, 2019 at 9:18
3 Answers
Reset to default 5I 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