Question

我试图仅在div悬停但是无法正常工作时显示jscrollpane可见性

这是代码

 $(document).ready(function(){ 
        $("#scroll").on("mouseenter", function(){
              $(this).jScrollPane();
        });

        $("#scroll").on("mouseleave", function(){
             var element = $(this).jScrollPane({});
             var api = element.data('jsp');
             api.destroy();
        });
 });



<td width="200">
        <div id="scroll" style="height:100px;overflow: auto;width: 100%;">
          <p>text -1</p>
          <p>text -2</p>
          <p>text -3</p>
          <p>text -N</p>
        </div>
</td>

Answer 1

问题在于当你破坏滚动窗格时。它将原始内容替换为原始内容，请参阅代码段，因此注册的事件不再有效。您可以尝试使用事件委派。

来自JScroll Pane的片段，破坏方法：

        function destroy(){
            var currentY = contentPositionY(),
                currentX = contentPositionX();
            elem.removeClass('jspScrollable').unbind('.jsp');
            //See the below line
            elem.replaceWith(originalElement.append(pane.children()));
            originalElement.scrollTop(currentY);
            originalElement.scrollLeft(currentX);

            // clear reinitialize timer if active
            if (reinitialiseInterval) {
                clearInterval(reinitialiseInterval);
            }
        }

并且你不需要再次重新初始化它以获取destor而只是直接访问data('jsp')并在其上调用destroy。

    $('table').on("mouseleave","#scroll", function(){ //Attach the event to the closest possible parent
       $(this).data('jsp').destroy();
    });

<强> Demo

如何在div悬停时显示jscrollPane

1 个答案: