Kevin Powell - Community•2y ago

don't know how to scroll from one element to another when overflow is hidden

hey folks I have set the css property overflow: hidden; for the body and I need to smooth scroll from one element to another element and these are the element

<div class="firstContainer"></div>
<div class="secondContainer"></div>

<div class="firstContainer"></div>
<div class="secondContainer"></div>

so how do I smooth scroll from first div to second div

4 Replies

MarkBoots•2y ago

you can use a bookmarklink (html/css)

<a href="#id_of_element">Jump to section</a>
<section id="id_of_element">Here<section>

<a href="#id_of_element">Jump to section</a>
<section id="id_of_element">Here<section>

html { scroll-behaviour: smooth }

html { scroll-behaviour: smooth }

or scrollIntoView (js)

element.scrollIntoView({behavior: "smooth"})

element.scrollIntoView({behavior: "smooth"})

Aditya KiradOP•2y ago

I tried this

function submitRating() {
    let checkedButton = document.getElementsByName("rating")
    let submitArea = document.getElementsByClassName("secondContainer")
    for(let i = 0; i < checkedButton.length; i++) {
        if(checkedButton[i].checked) {
            document.getElementById('ratingDisplay').innerHTML = `You selected ${checkedButton[i].value} out 5`
            try {
                submitArea.scrollIntoView();
            } catch (err) {
                console.log(err)
            }
        }
    }
}

function submitRating() {
    let checkedButton = document.getElementsByName("rating")
    let submitArea = document.getElementsByClassName("secondContainer")
    for(let i = 0; i < checkedButton.length; i++) {
        if(checkedButton[i].checked) {
            document.getElementById('ratingDisplay').innerHTML = `You selected ${checkedButton[i].value} out 5`
            try {
                submitArea.scrollIntoView();
            } catch (err) {
                console.log(err)
            }
        }
    }
}

But got this error

TypeError: submitArea.scrollIntoView is not a function
    at submitRating (index.js:8:28)
    at HTMLButtonElement.onclick (index.html:40:61)

TypeError: submitArea.scrollIntoView is not a function
    at submitRating (index.js:8:28)
    at HTMLButtonElement.onclick (index.html:40:61)

MarkBoots•2y ago

are you sure you are selecting the secondContainer properly? --edit: ohw i see. You are using getElementsByClassName. That collects an array of elements (even if it is only 1) change that to document.getElementsByClassName("secondContainer")[0] to get the first of that array or document.querySelector(".secondContainer") to only select the first appearance of a selector

Aditya KiradOP•2y ago

Okay

Gaming

Programming

don't know how to scroll from one element to another when overflow is hidden