fix(virtualScroll): first node should use clientTop/clientLeft

This commit is contained in:
Adam Bradley
2016-06-23 13:22:32 -05:00
parent 6a52a4a1ec
commit 2197d49633
3 changed files with 17 additions and 4 deletions

View File

@ -1,4 +1,4 @@
<ion-header> <ion-header style="opacity: 0.9">
<ion-navbar> <ion-navbar>
<ion-title>Virtual Scroll: Image Gallery</ion-title> <ion-title>Virtual Scroll: Image Gallery</ion-title>
<ion-buttons end> <ion-buttons end>
@ -10,7 +10,11 @@
</ion-header> </ion-header>
<ion-content> <ion-content fullscreen>
<h4 padding>
Name these cars:
</h4>
<ion-list [virtualScroll]="items" <ion-list [virtualScroll]="items"
[headerFn]="headerFn" [headerFn]="headerFn"
@ -37,6 +41,10 @@
</ion-list> </ion-list>
<h4 padding>
How many did you get right?
</h4>
</ion-content> </ion-content>
<style> <style>

View File

@ -543,6 +543,8 @@ describe('VirtualScroll', () => {
offsetHeight: height, offsetHeight: height,
offsetTop: top, offsetTop: top,
offsetLeft: left, offsetLeft: left,
clientTop: top,
clientLeft: left,
style: { style: {
top: '', top: '',
left: '' left: ''

View File

@ -284,7 +284,9 @@ export function initReadNodes(nodes: VirtualNode[], cells: VirtualCell[], data:
if (nodes.length && cells.length) { if (nodes.length && cells.length) {
// first node // first node
// ******** DOM READ **************** // ******** DOM READ ****************
cells[0].top = getElement(nodes[0]).offsetTop; let firstEle = getElement(nodes[0]);
cells[0].top = firstEle.clientTop;
cells[0].left = firstEle.clientLeft;
cells[0].row = 0; cells[0].row = 0;
// ******** DOM READ **************** // ******** DOM READ ****************
@ -606,13 +608,14 @@ function calcHeight(viewportHeight: number, approxHeight: string): number {
/** /**
* NO DOM * NO DOM
*/ */
function getElement(node: VirtualNode) { function getElement(node: VirtualNode): HTMLElement {
let rootNodes = node.view.rootNodes; let rootNodes = node.view.rootNodes;
for (var i = 0; i < rootNodes.length; i++) { for (var i = 0; i < rootNodes.length; i++) {
if (rootNodes[i].nodeType === 1) { if (rootNodes[i].nodeType === 1) {
return rootNodes[i]; return rootNodes[i];
} }
} }
return null;
} }