Question

我正在尝试使用＆＃34; perfect-scrollbar.js＆＃34;我使用淘汰赛的MVC 5应用程序http://noraesae.github.io/perfect-scrollbar/。我遇到的问题是我在代码中有以下部分（通常是MVC 5 SPA模板代码，为了简洁我省略了不需要的东西）

           <div data-bind="if: loggedIn" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <span class="navbar-text nofloat">                                
                           <div id="description" class="wrapper"> <!--This is the area that is supposed to scroll-->
                           <div>
                           <p>The command takes options applicable</p>
                           <p>The command takes options applicable</p>
                           <p>The command takes options applicable</p>
                           <p>The command takes options applicable</p>

                           </div>
                           </div>                               
                        </span>
                    </li>
                </ul>

            </div>

我的javascript是

$('#description').perfectScrollbar();

问题是滚动条永远不会出现，但只要我从代码中删除 data-bind =＆＃34; if：loggedIn＆＃34; 部分，它就可以正常工作（滚动条出现）。有谁知道如何解决这一问题？与其他第三方滚动条组件（如iScroll

）的问题相同

Answer 1

当附加的observable更改时，if绑定将删除并重新创建其子节点。

因此，如果您只拨打$('#description').perfectScrollbar();一次，那么下次if绑定重新评估时，您的description将被删除/重新创建，这样您就会丢失滚动条。

解决方法是使用visible binding而不是if，因为它只隐藏节点而不删除它们，但可能这不是您想要的。

因此，更合适的解决方案是创建一个非常简单的custom binding handler，将perfectScrollbar应用于给定节点：

ko.bindingHandlers.perfectScrollbar = {
    init: function(element) {        
        $(element).perfectScrollbar();   
    }
}

并在您的视图中使用它：

<div id="description" data-bind="perfectScrollbar: {}" class="wrapper">

演示JSFiddle。

敲门，如果绑定导致问题＆＃34; perfect-scrollbar.js＆＃34;

1 个答案: