スクロールバー付きのDiv要素のリサイズアイコンを常に右下に表示したい。

Question

前提・実現したいこと

リサイズ可能なボックスにスクロールバーを一緒に実装しているが、
スクロールしたときにリサイズハンドラは常に一番右下に表示したい

発生している問題・エラーメッセージ

該当のソースコード

- @mind_maps.each do | map |
    div.mind_maps.color_box
      p = simple_format( map.mind )

$(function(){
    $(".mind_maps.color_box").resizable({
      containment: 'parent',
    });
  });

$(".mind_maps.color_box").on("scroll", function(){
    var under = $(this).scrollTop();

　　この後の処理をどうすればいいのか詰まっています。

  });

overflow: scroll;

試したこと

スクロールアクションをする際に
高さ位置を取得してハンドラ位置の調整をすれば良いと思っているのですが、
ポジション指定するにしてもリサイズハンドラの取得が出来ず、
どうすればいいか詰まっています。

Comments

[miyabi_pudding]

htmlも記載してください。
質問本文に。

[shuzi]

ありがとうございます。
さっそくhtml記載しました。

[miyabi_pudding]

いや、これ、100%なんかのフレームワーク使ってますよね？
生のHTMLじゃないですよね。
なら、使用しているフレームワークのタグも追加したうえで、質問本文に記載しましょう。

[shuzi]

slimを使ってます。
タグ追加しました。
ご指摘ありがとうございます。

Answer 1

結局、位置を調整する方法が分からなかったので、やっつけで
一つネストして、javascriptで、その親要素のmind_mapを指定することで
ハンドラをスクロールバーに埋め込んでみました。

いつかはきちんとできる様にしたいなぁ。

- @mind_maps.each do | map |
    div.mind_maps
      div.color_box
        p = simple_format( map.mind )

$(function(){
    $(".mind_map").resizable({
      containment: 'parent',
    });
  });