0

I have a react component that needs to scroll to bottom given specific triggers. Following the answers in this SO question seemed like a nice and simple solution along these lines (full examples can be found in the question linked):


const scrollToBottom = () => {
  if (messagesEndRef.current) {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  }
};

However, after embedding the App in an iFrame it turns out that this will also trigger the parent page to scroll, which is bad. I tried different variations of the solution linked in the answer to this question, but without success.

Edit: some examples of those failed attempts:

// document.documentElement.scrollTop = messagesEndRef.current.offsetTop;
// messagesEndRef.current.parentNode.scrollTop = messagesEndRef.current.offsetTop;

Any pointer to how to achieve the same scrolling behavior but without affecting the iFrame parent page would be much appreciated.

citivin
  • 626
  • 1
  • 9
  • 24

2 Answers2

2

Nevermind, this answer to another question fixed it

code for future visitors:


messagesEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

Edit: well, this works nicely with all browsers other than Safari & IE apparently..

citivin
  • 626
  • 1
  • 9
  • 24
0

Try this:

give a div at the bottom of the page in iframe an id, lets say: 'bottom-id'.

And declare a hooks, which gets triggered onClick of a button;

const [link,setlink]=useState('some-link')

and your iframe must look like this:

<iframe src={link}/>

and button:

<button onClick={()=>setlink('some-link#bottom-id')}>goto bottom in iframe</button>