使用 Kendo Mobile，如何防止视图滚动？

Question

我有具有三个可折叠区域 div 的 Kendo Mobile View。我有一个无休止的滚动 kendoMobileListView，每个都有 css 溢出 = auto。当我滚动时，它会滚动整个视图，而不是 div 中的列表视图。用户界面如下所示：

我的视图标记如下：

    <!-- Contact Search View-->
<div id="employee-contact-search-view"
     data-role="view"
     data-model="klas.contactSearchViewModel"
     data-init="klas.contactSearchViewModel.initalizeContactSearch"
     data-layout="drawer-layout"
     data-title="Search Contacts">
    <div style="text-align:center;">
        <input id="contactSearchBox" type="search" placeholder="Enter Contact Name to Find" class="contactSearchInput" />
    </div>
    <div id="contactSearchResultsArea" class="contact-search-results-area-hidden">
        <div class="search-collapose-buttom">
            Provider Contacts
        </div>
        <div class="collapose-contact-area collapose-contact-area-open">
            <div>
                <ul id="providerContactListView" data-role="listview"></ul>
            </div>
        </div>
        <div class="search-collapose-buttom">
            Vendors Contacts
        </div>
        <div class="collapose-contact-area collapose-contact-area-closed">
            <ul id="vendorContactListView" data-role="listview"></ul>
        </div>
        <div class="search-collapose-buttom">
            Employees
        </div>
        <div class="collapose-contact-area collapose-contact-area-closed">
            <ul id="employeeContactListView" data-role="listview"></ul>
        </div>
    </div>
</div>

我初始化第一个无限滚动条的 JavaScript 是：

      var dataSource = new kendo.data.DataSource({
                        pageSize: 20,
                        page: 1,
                        serverPaging: true,
                        transport: {
                            read: {
                                url: klas.apiUrl + "/search/providers/",
                                dataType: "json"
                            },
                            parameterMap: function (options) {
                                debugger;
                                var parameters = {
                                    searchString: $('#contactSearchBox').val(),
                                    rowsPerPage: options.pageSize,
                                    row: options.take,
                                };

                                return parameters;
                            }
                        },
                        schema: {
                            data: function (data) {
                                return data.Data;

                            },
                            total: function (data) {
                                return data.Count;
                            }
                        }
                    });

                    $("#providerContactListView").kendoMobileListView({
                        endlessScroll: true,
                        dataSource: dataSource,
                        template: $("#contact-search-list-template").text(),
                        scrollTreshold: 10
                    });

应该允许用户滚动列表视图的 Div 的 CSS 如下所示：

.collapose-contact-area-open { 
display: block; 
background-color: white;
border: 1px solid gray;
height: 63vh;
margin-left:2px;
margin-right:2px;
border-radius:0 0 4px 4px;
overflow:auto;
}

我希望固定视图并滚动多视图。有什么建议吗？

Answer 1

您是否尝试将视图设置为stretch？

<div id="employee-contact-search-view"
   data-role="view"
   data-stretch="true" ...

文档说：

如果设置为 true，视图将拉伸其子内容以占据整个视图，同时禁用动态滚动。如果视图包含图像或地图，则很有用。