Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't scroll on component mount #430

Open
LauraBeatris opened this issue Jun 1, 2020 · 10 comments
Open

Can't scroll on component mount #430

LauraBeatris opened this issue Jun 1, 2020 · 10 comments

Comments

@LauraBeatris
Copy link

I have the following function to scroll to the bottom of the container

  const scrollChatToBottom = useCallback(() => {
    animateScroll.scrollToBottom({
      containerId: "event-chat-messages",
    });
  }, []);

And I want to execute that function on the component mount

  useEffect(() => {
    scrollChatToBottom();
  }, [
    scrollChatToBottom,
  ]);

But it's not working, is there a reason to that happen?

@fisshy
Copy link
Owner

fisshy commented Jun 2, 2020

Should most likely work.

Could you provide a Plunkr/Codepen demonstrating the issue?

@LauraBeatris
Copy link
Author

@fisshy Sure! I created a sandbox in order to demonstrate the issue

@fisshy
Copy link
Owner

fisshy commented Jun 8, 2020

I'm not really sure why it doesn't work on initial mount. but providing a ref solves it.

import React, { useRef, useEffect } from "react";
import { animateScroll } from "react-scroll";
import "./styles.css";

export default function App() {
  const { ref } = useRef();
  useEffect(() => {
    animateScroll.scrollToBottom({
      container: ref,
      duration: 2000,
      smooth: true
    });
  }, [ref]);

  return (
    <div id="big-container" ref={ref}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

@LauraBeatris
Copy link
Author

Maybe the element isn't declared in the tree yet.

@fisshy
Copy link
Owner

fisshy commented Jun 8, 2020

Yepp, could be.

@fisshy fisshy closed this as completed Jun 8, 2020
@pedro-lb
Copy link

pedro-lb commented Jun 8, 2020

Hey there, @fisshy! I don't think this issue is solved.

Should be resolved internally within the lib - otherwise everywhere we use this we'll have to add a ref or setTimeout - which is neither documented nor practical.

If you want we could submit a PR fixing this issue.

@fisshy
Copy link
Owner

fisshy commented Jun 8, 2020

Yes, I was a bit fast to close it, sorry.

You both are more then welcome to make a PR. Would be cool to make something like “useScroll” which resolves after the three is updated.

@ru88s
Copy link

ru88s commented Sep 22, 2021

@fisshy
How about this?
I solved the problem with this.

import { useEffect, useRef } from "react";
import { scroller } from "react-scroll";

const containerRef = useRef(null);

useEffect(() => {
if (containerRef && containerRef.current) {
      scroller.scrollTo("event-chat-messages", {});
}, [containerRef.current]);

<div ref={containerRef}>
   <div id="event-chat-messages"></div>
</div>

@fisshy
Copy link
Owner

fisshy commented Sep 22, 2021

@ru88s It's a good workaround, I think I actually have a PR solving this, but I've forgotten to merge it.

#435

I should probably merge this.

@ru88s
Copy link

ru88s commented Sep 22, 2021

@fisshy
I understand now. Thank you very much.
I'm having trouble with the process after the DOM load is complete, so please merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants