Transfer the scroll top value from a textarea to a div element

Question

Transfer the scroll top value from a textarea to a div element

In the parent div, there is a div and a textarea. I am attempting to synchronize the scrollTop value of the textarea with the div so that they move together when scrolling.

The issue arises when I input text into the textarea and hit enter for a new line. The div's scrollTop value does not update, while the textarea's does.

Upon hitting enter again, both values update, but it appears that the div's scrollTop value lags one step behind the textarea.

https://codesandbox.io/s/objective-feather-ngq8t

handleScroll = (e) => {
   setTextareaScrollTop(e.target.scrollTop);
   e.target.previousElementSibling.scrollTop = e.target.scrollTop;
   setDivScrollTop(e.target.previousElementSibling.scrollTop);
};

https://i.sstatic.net/woIsT.png

javascript html css reactjs

Answer 1

Answer №1

To work around this issue simply, you can omit the setDivScrollTop from the handleScroll function and insert a new line with \n after updating the text in the red div. The caret character will then allow it to align with the other div.

handleScroll = (e) => {
    setTextareaScrollTop(e.target.scrollTop);
    e.target.previousElementSibling.scrollTop = e.target.scrollTop;
    // setDivScrollTop(e.target.scrollTop);
};

handleInput = (e) => {
    console.log(divScrollTop, textareaScrollTop)
    setText(e.target.value + "\n"); // add "\n"
};

This can be observed in action on Codesandbox

Additionally, I have included a border style for the text area element and set spellCheck={false} to display their equality.

Answer 2

To work around this issue simply, you can omit the setDivScrollTop from the handleScroll function and insert a new line with \n after updating the text in the red div. The caret character will then allow it to align with the other div.

handleScroll = (e) => {
    setTextareaScrollTop(e.target.scrollTop);
    e.target.previousElementSibling.scrollTop = e.target.scrollTop;
    // setDivScrollTop(e.target.scrollTop);
};

handleInput = (e) => {
    console.log(divScrollTop, textareaScrollTop)
    setText(e.target.value + "\n"); // add "\n"
};

This can be observed in action on Codesandbox

Additionally, I have included a border style for the text area element and set spellCheck={false} to display their equality.

Answer 3

Answer №2

I have made some modifications to your code, which you can view at this link.

const useUpdate = () => {
  const [, dispatch] = useState(0);
  const ref = useRef(() => {
    dispatch((v) => v + 1);
  });

  return ref.current;
};

When you need to repaint, simply use the following:

  handleScroll = (e) => {
    e.target.previousElementSibling.scrollTop = e.target.scrollTop;
    refresh();
  };

Instead of using setState, I have replaced it with useUpdate. Let me know your thoughts on this approach, as it deviates slightly from your initial question.

If I remove both instances of setState as you had originally, I encounter the issue you described.

Answer 4

I have made some modifications to your code, which you can view at this link.

const useUpdate = () => {
  const [, dispatch] = useState(0);
  const ref = useRef(() => {
    dispatch((v) => v + 1);
  });

  return ref.current;
};

When you need to repaint, simply use the following:

  handleScroll = (e) => {
    e.target.previousElementSibling.scrollTop = e.target.scrollTop;
    refresh();
  };

Instead of using setState, I have replaced it with useUpdate. Let me know your thoughts on this approach, as it deviates slightly from your initial question.

If I remove both instances of setState as you had originally, I encounter the issue you described.

Transfer the scroll top value from a textarea to a div element

Answer №1

Answer №2

Similar questions

Making the height of two divs equal within the same parent element using CSS

The homepage is not converting to a different language

Use JavaScript and PHP to retrieve a value from an array and dynamically populate select options based on that value

Google-play-scraper encounters an unhandled promise rejection

Utilizing JQuery Ajax to dynamically replace elements using JQuery functions

Is it possible to caution users before refreshing the page, while still allowing them to

Utilizing Protractor's advanced filtering techniques to pinpoint the desired row

Utilizing ASP.NET AJAX: Enhancing User Experience with ScriptManagerProxy for HTML Button Click Events

Enabling a JSON file property to be clickable as needed

Navigate to a different route in AntD Table by clicking on it

No content sent in the request body while implementing fetch

A guide to incorporating a textview into a React application using the Google Maps API

The JavaScript function for converting a date to a local string in the format of DD MMM YYYY is causing an error message in the browser console stating that it is not a valid function

Utilizing React with Okta authentication, powered by an Express server running behind an

Do not reveal result of coin flip using Javascript and API

Regular expressions: understanding greedy versus lazy quantifiers

What is the best way to send a POST request using axios with both body and form data included at the

Guide to dynamically insert rows in HTML using Vue.js based on the selected option

Transform your .obj files into .glb files effortlessly with npm and Laravel

What is the best way to export Class methods as independent functions in TypeScript that can be dynamically assigned?