How to make custom scroll box? - ☔︎ ∙ I need Help!

This is done by using positioning commands and basically putting a scroll-able div with a fixed width and height to match the image, under the image.

So in your case you'd use this code:

Code

#tama {
  width: 500px;
  height: 500px;
  position: relative;
}

#tama > img {
  pointer-events: none;
  position: absolute;
}

#tama > div {
  width: 170px;
  height: 175px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  top: 150px;
  left: 168px;
  background-color: yellow;
}

Code

<div id="tama">
  <div>
    Hello this is my scroll zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone zone
  </div>
  <img src="https://forum.melonland.net/index.php?action=dlattach;topic=4829.0;attach=6267;image" />
</div>

There's quite a few complex things going on here and you'll need to research each CSS command in your own time to understand fully but the key things to look up are:

"position" - relative and absolute - these are different commands to tell the browser how it should position a div on the page.
"top" / "left" - these are position values, e.g.how far from the top or the left corner should the div be - their effect changes based on the kind of positioning that's being used.
"pointer-events" - this disables the mouse from clicking the image so it does not interfere with the scroll.
"overflow" - this tells the browser to either hide or add scroll bars when the content of a div is too big for the div

In this case we set the position of "tama" to be "relative", this means all elements within it will be positioned RELATIVE to the tama div. Later we set both the image and the inner div to "absolute", this means they will be positioned based on absolute values e.g. 150px from the top and 168px from the left - because those values are relative to the tama div, they will be 150px from the top corner of the tama div (as apposed to the top corner of the whole webpage which is default). The image has no positioning values, its just set as absolute; I did this so that the image appears on top of the the scroll box instead of under it, because it looks better that way!

Id also note the values I picked 168px and 150px are not picked by any magic formula; I just kept changing the numbers and reloading the page until it looked right based on the image you supplied - so its just trial and error! The first 500px values on #tama are just the size of the image to make sure nothing tries to squish it.

I also wanna say; positioning is possibly THE MOST confusing thing to learn as a new web craftier, so take your time and don't feel bad if you don't get it right away (it took me years!!!)

Just keep trying things and reading the W3 documentation!