diff options
| author | srichman333 <sarah_n_richman@brown.edu> | 2023-09-28 09:50:39 -0400 |
|---|---|---|
| committer | srichman333 <sarah_n_richman@brown.edu> | 2023-09-28 09:50:39 -0400 |
| commit | 0d7cb9352552c16f6a7621eb18933ff73e7357af (patch) | |
| tree | f9692578391feafce3b7b25d936e429976c0bda4 | |
| parent | d334eb163e0e960c9d662eb696fcf98aa02fdadf (diff) | |
smoother scrolling
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/TableBox.tsx | 25 |
1 files changed, 15 insertions, 10 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 243c1a0c7..07d151702 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -92,29 +92,34 @@ export class TableBox extends React.Component<TableBoxProps> { } } if (useCell && useContainer){ + + // check for 20 (inital value) as end point + if (this.endID == 20){ + let newEnd = this.startID + useContainer.getBoundingClientRect().height / useCell.getBoundingClientRect().height + 1; + newEnd = Math.floor(Number(newEnd)) + if (newEnd<this.endID){ this.endID -= .1; } + if (newEnd>this.endID && this.endID<=this._tableDataIds.length) { this.endID += .1; } + } + // top if (useContainer.scrollTop <= 10 && this.startID >= -1){ - this.startID -= 1; - this.endID -= 1; + this.startID -= .01; + this.endID -= .01; } // bottom else if (useContainer.scrollHeight - 50 <= useContainer.scrollTop + useContainer.getBoundingClientRect().height && this.endID<=this._tableDataIds.length){ - this.startID += 1; - this.endID += 1; + this.startID += .1; + this.endID += .1; } // regular scroll else { let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1; newStart = Math.floor(Number(newStart)) - if (newStart<this.startID && this.startID>=-1){ this.startID -= 1; } - if (newStart>this.startID) { this.startID += 1; } + if (newStart<this.startID && this.startID>=-1){ this.startID -= .1; this.endID -= -.1; } + if (newStart>this.startID) { this.startID += .1; this.endID += .1; } - let newEnd = this.startID + useContainer.getBoundingClientRect().height / useCell.getBoundingClientRect().height + 1; - newEnd = Math.floor(Number(newEnd)) - if (newEnd<this.endID){ this.endID -= 1; } - if (newEnd>this.endID && this.endID<=this._tableDataIds.length) { this.endID += 1; } } } else { |