CODEWITHSUNDEEP
cssreactjs
karolis2017
karolis2017

Reputation: 2415

Is there a way to get the height of a div set to `overflow-y: auto`

I have a div set to overflow-y: auto. Can I inspect what would be the divs height with its content without overflow-y: auto?

I want to keep overflow-y: auto and know what is the height of div like there is no overflow-y: auto

More specific:

I have a chat window. Chat contains messages as text and images. Chat div is set to overflow-y: auto and at the bottom inside the div I have another div which holds ref={scrollToBottomRef}

Then I have useEffect hook:

  useEffect(() => {
    scrollToBottomRef.current.scrollIntoView({
      behavior: 'smooth'
    });
  });

This works well. When messages are loaded I get the scroll down to the bottom. The issue occurs when the message contains an image. Then I get the scroll down to the bottom before the images are rendered thus after a split of a second the scroll bumps up from the bottom.

How do I work around that?

Upvotes: 1

Views: 53

Answers (2)

karolis2017
karolis2017

Reputation: 2415

I just changed scrollIntoView in my useEffect. It works as expected without smooth scroll

  useEffect(() => {
    scrollToBottomRef.current.scrollIntoView();
  });

Upvotes: 0

rydwolf
rydwolf

Reputation: 1528

This is the purpose of Element.scrollHeight, as pointed out by @Scrimothy. It works on just about every browser with no issues. It includes padding, but not border or margin. If the content doesn't fill the whole div, it returns the div's height.

Upvotes: 1

Related Questions