How to stick an image to the bottom of the visible part of a scrollable div

Question

I have a drop-down menu that has a lot of content. If this dropdown is used on a mobile device, the user will be required to scroll down inside the ul (the ul has overflow:scroll) to reveal the rest of the content. This is somewhat unusual, so I want a downwards-pointing arrow on the bottom of the visible part of the ul.

I just cant seem to place it correctly.

I'm using javascript to set the height of the ul to never exceed the viewport height. I'm just scrolling inside the ul as intended, but it can be hard to that there's more menu-content in some cases.

<ul>
  <li>
  <li>
  <li>
  <li>
  <li>
  ...
  <img class="moreContent-arrow"> //Should be at the bottom of the visible part of the ul
</ul>

The ul has position:absolute. I've tried giving the arrow position:absolute; bottom: 0;, but that just puts it in the correct position until you move the scrollbar.

I've been searching for an answer but I cant seem to find any searchwords that doesn't lead me to how to position a footer to the bottom of the page.

---

EDIT 1:

Tried to use position:fixed on the image, but I'm using jquery's .slideToggle() on the opening and closing on the menu, meaning that the image which is fixed wont look good, as it pops in and out of existence without sliding into view with the rest of the content.

Answer 1

After trying to realize what you want.

Try this:

ul {
    position: relative;
    height: 100px;
    overflow: auto;
}

.list {
    background-color:red;
    position: relative;
    height: 100px;
}

img {  
    background-color: green;
    height: 20px;
    width: 20px;
    position: absolute;
    display: block;
    bottom:0px;
 
}

<div class="list">

    <ul>
       <li>
           Stuff
      </li>
      <li>
           More Stuff
      </li>
      <li>
          Even more Stuff
      </li>
      <li>
          Stuff
      </li>
      <li>
          Last but not least, Stuff.
      </li>
      <li>
          Stuff
      </li>
      <li>
          More Stuff
      </li>
      <li>
          Even more Stuff
      </li>
      <li>
          Stuff
      </li>
      <li>
          Last but not least, Stuff.
      </li>
      <li>
          Stuff
      </li>
      <li>
          More Stuff
      </li>
      <li>
          Even more Stuff
      </li>
      <li>
          Stuff
      </li>
      <li>
      Last but not least, Stuff.
      </li>
    </ul>
    <img class="moreContent-arrow">
</div>

The list has the height so change the calculation in your js to affect it. Give the same height to the ul, and overflow: auto.

So, to explain what I did here, as you can notice what scrolls is the ul, that is inside the .list. The img has position: absolute relative to the .list not the ul. So when the ul scrolls, it doesn't affect the img.