オーバーフロー：位置のスクロールdiv：絶対要素内

Question

私はオーバーフロー内のテーブルを持っています：スクロールコンテナ、テーブル内にいくつかのボタンがあります。誰かがクリックすると、コンテキスト/ツールチップ（位置：絶対層）のテキストが表示されます。

私は右にスクロールし、ボタンをクリックすると、それが正しい無視スクロールに外に移動：コンテナの位置を作る

は、位置の問題を解決するが、そのコンテナ内に表示が表示されませんメニュー：私は、次の目的の動作を取得するために助けが必要

：

これは抜粋です：

.container{ 
 
    width:200px; 
 
    height:100px; 
 
    overflow:scroll; 
 
    position:relative; /* removing this solves the problem, but .contextual moves to the original position */ 
 
} 
 
.board{ 
 
    width:400px; 
 
} 
 
.contextual{ 
 
    display:none; 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    margin: 20px; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=container> 
 
    <table class=board> 
 
     <tr><td colspan=2>This board size (200) is bigger than its container size (100).</td></tr> 
 
     <tr> 
 
     <td>this is a button with a contextual element</td> 
 
     <td> 
 
      <input type=button value="click me" onclick="$('.contextual').show();" /> 
 
      <div class=contextual>This is a contextual help text.</div> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
</div>

Answer 1

オーバーフローするdivの外側にコンテキストdivを配置し、マウスの位置に合わせて配置します。

showContext = function() { 
 
    var e = window.event; 
 

 
    var posX = e.clientX; 
 
    var posY = e.clientY; 
 
    var context = document.getElementById("contextual") 
 
    context.style.top = posY + "px"; 
 
    context.style.left = posX + "px"; 
 
    context.style.display = "block"; 
 
}

.container{ 
 
    width:200px; 
 
    height:100px; 
 
    overflow:scroll; 
 
    position:relative; /* removing this solves the problem, but .contextual moves to the original position */ 
 
    z-index:1; 
 
} 
 
.board{ 
 
    width:400px; 
 
} 
 
#contextual{ 
 
    display:none; 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:grey; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <table class="board"> 
 
     <tr><td colspan=2>This board size (200) is bigger than its container size (100).</td></tr> 
 
     <tr> 
 
     <td>this is a button with a contextual element</td> 
 
     <td> 
 
      <input type="button" value="click me" onclick="javascript:showContext();" /> 
 
      
 
     </td> 
 
     </tr> 
 
    </table> 
 
</div> 
 
<div id="contextual">This is a contextual help text.</div>

Answer 2

あなたはoverflow: autoを使用することができます。これにより、必要なときにのみスクロールバーが表示されます。また、.contextualからz-index: 2を削除することもできます。