CODEWITHSUNDEEP
javascriptcssreactjsscrolloverflow
Patorikku
Patorikku

Reputation: 71

scrollTo or react-scroll doesn't work with overflow

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.

Upvotes: 1

Views: 2855

Answers (1)

Liftoff
Liftoff

Reputation: 25372

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>

Upvotes: 3

Related Questions