CourtneyJ
CourtneyJ

Reputation: 508

Scrolling to an element in a div with overflow set to scroll

I am building a time block with all the hours of the day the container only takes up 75vh and is set to scroll on overflow. I am trying to have the page load and scroll to the current time within my time block but I am having trouble figuring how to scroll within the div instead of the whole page. This works when I have the container set to 100vh but the overflow: scroll is creating a real issue for me. I see lots of answers for this issue in Angular an jQuery. But I am trying to do this in reactjs, and Im not sure how to target the scroll bar within my div.

onLoad I am calling this function:

 const scrollToTime = () => {
        const currentHour = moment().hour().toString()
        const currentTimeEl = document.getElementById(currentHour)

        window.scrollTo({
            top: currentTimeEl.offsetTop,
            behavior: "smooth"
        })
    }

I've thought of using Element.scrollTo() but this does not work.

This is a short snippet of what my container looks like:

 <div className="dayView">
         <hr className="day-divider1" />
            <div className='dayView-timeSlot' id="12">
                <Row className="time-row" >
                    <Col md="1" className="time-label">12:00 AM</Col>
                    <Col md="1" className="trash"><Trash /></Col>
                    <Col md="8" className="appointment-slot">
                        {" "}
                    </Col>
                </Row>
            </div>
            <hr className="day-divider-dashed" />

            <div className='dayView-timeSlot' id="12">
                <Row className="time-row">
                    <Col md="1" className="time-label">12:30 AM</Col>
                    <Col md="1" className="trash"><Trash /></Col>
                    <Col md="8" className="appointment-slot">
                        {" "}
                    </Col>
                </Row>
            </div>

            <hr className="day-divider1" />
        ...
</div>
.dayView{
  height: 75vh;
  overflow: scroll;
}

Is there a way to target the scroll within my dayView container?

Upvotes: 0

Views: 906

Answers (0)

Related Questions