title: How to determine the content step value of scrollarea
body: <p>I'm making my own UI from scratch using OpenGL that is why I'm asking this and please don't make any discouragement as this is just a hobby project.</p>
  
  <p>Currently, I'm stuck implementing how this scrollbars <strong>really work</strong>. In my current implementation, the <code>content</code> scrolls at the <strong>wrong step value</strong> as well as the <code>thumb</code>, meaning, I set the value manually like 1px step for each of them.</p>
  
  <p>The structure of my scrollbar implementation is describe as follows:</p>
  
  <ul>
  <li>I draw scrollbars i.e the main rectangle where the 3 button lies.</li>
  <li>Those 3 buttons are, <code>thumb</code>, <code>buttonBack</code> and <code>buttonNext</code>.</li>
  <li>All of them do the basic logic of scrollbars i.e when I click each one of them, they <strong>moved</strong>. But the whole part(scrollbar) don't know how to scroll <code>contents</code></li>
  <li>So what I did is: I make another object and I call it <code>scrollarea</code></li>
  <li>It has two scrollbars, vertical and horizontal scrollbar.</li>
  <li>I made a function called <code>scrollToX</code> and <code>scrollToY</code> which
  does what I named to them.</li>
  <li>But the step values I set to them are
  manually set up.</li>
  </ul>
  
  <p>I try to google some <code>scrollbar</code>, <code>scrollarea</code>, <code>scrollview</code> or whatever you call to that scrollable rectangle thing, but all I see are implementation and I cannot find any guides how to build your own. I have no choice but to look at their implementation. I try my best to comprehend what they did but their implementation of how their whole UI structure is very different to mine, and I cannot find anything useful there.</p>
  
  <p>So I ask again here if anybody can explain me well <strong>how to make a properly functional scrollbar</strong>.</p>
  
  <p>Most specific things I'm really concerned of are:</p>
  
  <ul>
  <li>How do I determine the <code>thumb step value</code>?</li>
  <li>How do I determine the <code>content step value</code>?</li>
  </ul>