jScrollPane内のホバー上でDIVを前方に移動

Question

私はjScrollPane（http://jscrollpane.kelvinluck.com）内にテーブルを持っています。テーブル上にはイメージがあるので、ユーザーがその上を移動すると、テキストのバブルが表示されます。

これはうまくいきますが、画像にカーソルを合わせると問題が発生します。その完全に私はそれが動作していないようです.bubbleのために高いz-index値を設定しようとしましたが、jspContainer

内部に隠されたり切断されることなく前進バブルをもたらすために推移したときに私は何をする必要があることです。

しかし、私はバブルが完全に表示されているjspContainerのコンテナの高さを増すが、私は任意の助けが理解されるであろう、ここでhttp://jsfiddle.net/livewirerules/x9dcgthp/3/

サンプルフィドルをした高さ

を増加させることなく、前方に持参する必要がある場合

Answer 1

jScrollPaneを失い、代わりにデフォルトのスクロールバーを処理することをお勧めします。 jScrollPaneがスクロールバーを削除してそれを独自のものに置き換えることができる唯一の方法は、コンテナをoverflow: hidden;に設定し、スクロールイベントを手動で処理することです。つまり、そのコンテナを超えるものは切り捨てられます。コンテナに目に見えるオーバーフローを強制すると、jScrollPaneの動作が停止します。

ただし、いくつかの回避策がありますが、すべてを提案するわけではありません。手動でスクロールし、それに応じてより多くのオーバーヘッドの原因となる位置とページの不応答にそれを移動する必要があると思いますが、

• あなたは、JScrollPaneにコンテナの外にツールチップを置くことができます。
• jscrollpaneの外側にある1つの余分なオブジェクトを、アイコンのクリック/ホバーでアクティブ/非アクティブにすることができます。これにより、オーバーヘッドとメンテナンス可能なコードが大幅に増加します。
• jScrollPaneの高さを上げてからパディングを追加し、ツールチップをアイコンの下に置かずに中央に移動することができます。しかし、これはまだ内容があふれている可能性があります。
• 代わりに、アイコンの下にツールチップを表示する代わりに、ホバー/クリックでデータ行をカバーすることができます。適切なUI/UXの原則に反しても、完全に表示されます。
• コンテンツを流出させる独自のjScrollPane実装を作成できます。これにより作業負荷は倍増しますが、それでもパフォーマンスは低下します。

組み込みのスクロールバーでは、全体的なデザインの方向は定義されていないため、jScrollPaneを失うことは最善の選択肢です。さらに、現代のブラウザの中には、すでにスクロールバーを隠していて、スクロール可能なコンテナに表示されている場合には、それらをより素敵な要素に置き換えるものもあります。

Answer 2

あなたが持っているjspcontainerの高さの最初の問題は、Z-インデックスのためではなく、データテーブルがレンダリングされている間に$('.scroll-pane').jScrollPane();を呼び出しているためです。これにより、JavaScriptが1または2のjScrollPaneの高さを設定します。その間にのみレンダリングされる2行。

呼び出しを$(document).ready()関数に追加する必要があります。そのため、関連するページのすべての要素がレンダリングされた後にペインが初期化されます。または、このコールをページの最後に追加します。

$(document).ready(function() 
{ 
    $('.scroll-pane').jScrollPane(); 
}); 

私はあなたが望むようにバブルアラインメント設定を得るためにCSSを回避することができると思います。 :)

また、調整するためにちょっとした作業をしたあなたのコードが少し変更されています。 http://codepen.io/Nasir_T/pen/RGdrbB

これが役に立ちます。