i had a problem with Laravel 10. I need to scroll to next element by pressing a button. I have already tried with myelement.scrollIntoView() and window.scrollTo() functions with no success, what is wrong?
My js:
import {polyfill, scrollIntoView} from "seamless-scroll-polyfill";
polyfill();
var Controls = {
questions: document.getElementsByClassName('question'),
center_questions: document.getElementsByClassName('center-question'),
nextbuttons: document.getElementsByClassName('next'),
prevbuttons: document.getElementsByClassName('prev'),
header: document.getElementById('header'),
init: function (){
for (let button of this.nextbuttons) {
button.addEventListener("click", e => {
this.nextslide(e);
} );
}
for (let button of this.prevbuttons) {
button.addEventListener("click", e => {
this.prevslide(e);
} );
}
},
nextslide: function (e) {
let id = e.target.closest(".question").firstElementChild.id;
var question = document.getElementById(parseInt(id) + 1);
window.scrollTo( 0, window.innerHeight );
},
prevslide: function (e) {
let id = e.target.closest(".question").firstElementChild.id;
document.getElementById(parseInt(id) - 1).scrollIntoView({ behavior: "smooth", block: "center"});
},
}
window.onload = Controls.init();
2
Answers
Solved.
According to this answer, window.scrollTo() function must be invoked on a element with "overflow: auto" property, typically "window". In my case "overflow: auto;" was on an element child. I have solved with:
Strange but true.
I cannot see exactly why your snippet doesn’t work as you don’t have a working example, but please use this example which I created as close to your code as possible as a reference to make it work 🙂