scrollTo or react-scroll doesn't work with overflow

Question

I'm trying to implement a click to scroll function in my react app. I tried using react-scroll library, window.scrollIntoView, and using window.scrollTo with a ref. These didn't work with my app having an overflow, so I'm forced to remove it to get it to work.

.App {
   height: 100vh;
   overflow-y: scroll; // removing this makes click to scroll work
}

how I used window.scrollTo:

const scrollSection = useRef(null);

const goToSection = () => {
  window.scrollTO({
    top: scrollSection.current.offsetTop,
    behavior: "smooth"
});

and react-scroll:

 <Link to="firstSection" spy={true} smooth={true}>
   <li></li>
 </Link>

Is there a way to get this working with overflow, since I'd like to keep the overflow styling if possible.

Liftoff · Accepted Answer · 2021-09-16 03:28:07Z

3

Call it on the overflowing element itself, rather than on the window. HTMLElements have a similar function just called scroll().

document.querySelector("button").addEventListener("click", function(){
  let target = document.getElementById("scroll");
  document.querySelector("div").scroll({
    top: target.offsetTop,
    behavior: 'smooth'
  });
});

html, body {margin: 0}

div > p
{
  height: 100px;
}

div
{
  height: 100vh;
  overflow: auto;
}

#scroll
{
  height: 240px;
  background: red;
}

<div>
  <button>Scroll</button>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p id="scroll">Scroll to me!</p>
</div>

answered Sep 16, 2021 at 3:28

Liftoff

25.6k16 gold badges74 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

scrollTo or react-scroll doesn't work with overflow

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related