У меня есть Kendo Mobile View с тремя складными областями div. У меня есть бесконечная прокрутка kendoMobileListView, в каждом из которых css overflow = 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
});
CSS для Div, который должен позволить пользователю прокручивать список, выглядит так:
.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;
}
Я хочу, чтобы представление было фиксированным, а несколько представлений прокручивались. Какие-либо предложения?