2

I have two textarea boxes and I want both of them to horizontally scroll simultaneously, based on the scroll bar at the bottom. The Following program I have written works fine as long as both textarea boxes have the same amount of texts/width. As you can see, my first text box has more text than the second; therefore, when I scroll using the scroll bar at the bottom text box, I will not see the full text on the first box. Please run the code to see the issue. Is there a way I can increase the scrolling area of the bottom text box area to match the scrolling requirement of the first box?

  //Java Script Code
  var headbox = document.getElementById('head_text_area');
  var bodybox = document.getElementById('main_text_area');
  bodybox.addEventListener('scroll', select_scroll, false);

  function select_scroll(e) {
    headbox.scrollLeft  = bodybox.scrollLeft;        
  }
/*CSS style*/
#main_text_area, #head_text_area{
  resize: none;  
  white-space: nowrap; /*All the text user types without pressing an enter should be in one line*/
  width: 100%;
}

#head_text_area::-webkit-scrollbar {
    display: none;/*First text box should not show a scroll bar*/
}
<textarea rows="6" id="head_text_area" width="100%" disabled>
This line is longer than the line in the second text area. At the start of the website, I won't be able to scroll to the right to see all the text in this area. Unless I put more texts on the bottom text area box. 
More text might be here. The horizontal scroll bar of this section is hidden.   
   </textarea><br><br>

  <textarea id="main_text_area" rows="6" width="100%"> 
This box isn't as long as the other text area. Therefore, scroll bar in this is short. This limits the viewable area of first box. 
  </textarea>
D P.
  • 1,039
  • 7
  • 27
  • 56

1 Answers1

0

To make a simple scrolling motion which will be equal on both scroll bars depending on the lower one. You will have to convert the values of the scroll bars to percentage values. For this to work there has to be some scrollable content in the lower text area.

Here is an update to the function which implements percentage values

function select_scroll(e) {
    let percent = bodybox.scrollLeft / (bodybox.scrollWidth - bodybox.clientWidth);
    headbox.scrollLeft =  (headbox.scrollWidth - headbox.clientWidth)* percent;
}
Asd20752
  • 323
  • 4
  • 12
  • Thank you for showing me with an example. When I plug this code in to my code, it produce a value of undefined and nothing moves. Specifically, `bodybox.scrollLeftMax;` doesn't return any value(same with `headbox.scrollLeftMax`). `bodybox.scrollLeft` does return a value. Does `scrollLeftMax` works on chrome browser? – D P. Jun 23 '21 at 14:13
  • You are absolutely right, scrollLeftMax is a Firefox only property it seems. But taking the scroll width of the box and subtracting the width of the box will give the same result. `bodybox.scrollWidth - bodybox.clientWidth;` I will update the example above with this instead. – Asd20752 Jun 23 '21 at 21:12
  • Thank you for this answer. It does work now. However, if the `bodybox` doesn't have enough text to generate a scrolling bar at the bottom, I won't have a way to scroll the extra text in the `headbox` section. I appreciate your help and the taking your time on this. – D P. Jun 25 '21 at 15:46