jscrollpane を 2 つの div (.scrollpane) に割り当てようとしました。しかし、残念ながら、ホバー時にのみスクロールバーを表示する機能は、最初の要素に対してのみ正常に機能します。2 つ目は常に表示されます。
$(関数() {
var $el = $('.scrollpane').jScrollPane({
縦ガター : 16
})、
拡張プラグイン = {
extPluginOpts: {
mouseLeaveFadeSpeed : 500,
hovertimeout_t : 1000,
useTimeout : 真、
デバイス幅: 980
}、
hovertimeout : null,
isScrollbarHover: false,
elementtimeout : null,
isScrolling : false,
addHoverFunc : 関数() {
if( $(window).width() ').css({
位置：「絶対」、
左: $vBar.css('左'),
トップ: $vBar.css('トップ'),
右: $vBar.css('right'),
ボトム : $vBar.css('bottom'),
幅 : $vBar.width(),
高さ: $vBar.height()
}).bind('mouseenter.jsp',function() {
clearTimeout( instance.hovertimeout );
clearTimeout( instance.elementtimeout );
instance.isScrollbarHover = true;
instance.elementtimeout = setTimeout(関数() {
$vBar.stop( true, true ).jspmouseenter();
}、100）;
}).bind('mouseleave.jsp',function() {
clearTimeout( instance.hovertimeout );
instance.isScrollbarHover = false;
instance.hovertimeout = setTimeout(関数() {
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
});
$vBar.wrap( $vBarWrapper );
}
}
}、
jspapi = $el.data('jsp');
$.extend( true, jspapi, extensionPlugin );
jspapi.addHoverFunc();
});