Skip to content

feat: Add additional scrollToOffset (prop) / offset (method calls) to allow scrolling to cells but offset by some pixels #1896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
driskell wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Add additional scrollToOffset (prop) / offset (method calls) to allow scrolling to cells but offset by some pixels #1896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/Grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ A windowed grid of elements. `Grid` only renders cells necessary to fill itself
| scrollLeft | Number | | Horizontal offset |
| scrollToAlignment | String | | Controls the alignment of scrolled-to-cells. The default ("_auto_") scrolls the least amount possible to ensure that the specified cell is fully visible. Use "_start_" to always align cells to the top/left of the `Grid` and "_end_" to align them bottom/right. Use "_center_" to align specified cell in the middle of container. |
| scrollToColumn | Number | | Column index to ensure visible (by forcefully scrolling if necessary). Takes precedence over `scrollLeft`. |
| scrollToOffset | Number | | Additional pixel offset applied on top of the scroll-to-cell result. Only takes effect when a scroll is triggered (e.g. by `scrollToRow`/`scrollToColumn` changing or `scrollToCell()` being called); changing this prop alone has no effect. Useful for accounting for a sticky header so that the target cell is not obscured. |
| scrollToRow | Number | | Row index to ensure visible (by forcefully scrolling if necessary). Takes precedence over `scrollTop`. |
| scrollTop | Number | | Vertical offset |
| style | Object | | Optional custom inline style to attach to root `Grid` element. |
Expand Down Expand Up @@ -79,11 +80,13 @@ Since `Grid` only receives `columnCount` and `rowCount` it has no way of detecti

This method will also force a render cycle (via `forceUpdate`) to ensure that the updated measurements are reflected in the rendered grid.

##### scrollToCell ({ columnIndex: number, rowIndex: number })
##### scrollToCell ({ columnIndex: number, rowIndex: number, offset?: number })

Ensure column and row are visible.
This method can be used to safely scroll back to a cell that a user has scrolled away from even if it was previously scrolled to.

The optional `offset` parameter applies an additional pixel offset on top of the calculated scroll position, overriding the `scrollToOffset` prop for this call. Useful for accounting for a sticky header so that the target cell is not obscured.

##### scrollToPosition ({ scrollLeft, scrollTop })

Scroll to the specified offset(s).
Expand Down
45 changes: 24 additions & 21 deletions docs/List.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,27 @@ That means that `List` also accepts [`Grid` props](Grid.md) in addition to the p

### Prop Types

| Property | Type | Required? | Description |
| :---------------- | :----------------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| autoHeight | Boolean | | Outer `height` of `List` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. |
| className | String | | Optional custom CSS class name to attach to root `List` element. |
| estimatedRowSize | Number | | Used to estimate the total height of a `List` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. |
| height | Number | ✓ | Height constraint for list (determines how many actual rows are rendered) |
| id | String | | Optional custom id to attach to root `List` element. |
| noRowsRenderer | Function | | Callback used to render placeholder content when `rowCount` is 0 |
| onRowsRendered | Function | | Callback invoked with information about the slice of rows that were just rendered: `({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void` |
| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` |
| overscanRowCount | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. |
| rowCount | Number | ✓ | Number of rows in list. |
| rowHeight | Number or Function | ✓ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number` |
| rowRenderer | Function | ✓ | Responsible for rendering a row. [Learn more](#rowrenderer). |
| scrollToAlignment | String | | Controls the alignment scrolled-to-rows. The default ("_auto_") scrolls the least amount possible to ensure that the specified row is fully visible. Use "_start_" to always align rows to the top of the list and "_end_" to align them bottom. Use "_center_" to align them in the middle of container. |
| scrollToIndex | Number | | Row index to ensure visible (by forcefully scrolling if necessary) |
| scrollTop | Number | | Forced vertical scroll offset; can be used to synchronize scrolling between components |
| style | Object | | Optional custom inline style to attach to root `List` element. |
| tabIndex | Number | | Optional override of tab index default; defaults to `0`. |
| width | Number | ✓ | Width of the list |
| Property | Type | Required? | Description |
| :---------------- | :----------------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| autoHeight | Boolean | | Outer `height` of `List` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. |
| className | String | | Optional custom CSS class name to attach to root `List` element. |
| estimatedRowSize | Number | | Used to estimate the total height of a `List` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. |
| height | Number | ✓ | Height constraint for list (determines how many actual rows are rendered) |
| id | String | | Optional custom id to attach to root `List` element. |
| noRowsRenderer | Function | | Callback used to render placeholder content when `rowCount` is 0 |
| onRowsRendered | Function | | Callback invoked with information about the slice of rows that were just rendered: `({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void` |
| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` |
| overscanRowCount | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. |
| rowCount | Number | ✓ | Number of rows in list. |
| rowHeight | Number or Function | ✓ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number` |
| rowRenderer | Function | ✓ | Responsible for rendering a row. [Learn more](#rowrenderer). |
| scrollToAlignment | String | | Controls the alignment scrolled-to-rows. The default ("_auto_") scrolls the least amount possible to ensure that the specified row is fully visible. Use "_start_" to always align rows to the top of the list and "_end_" to align them bottom. Use "_center_" to align them in the middle of container. |
| scrollToIndex | Number | | Row index to ensure visible (by forcefully scrolling if necessary) |
| scrollToOffset | Number | | Additional pixel offset applied on top of the scroll-to-row result. Only takes effect when a scroll is triggered (e.g. by `scrollToIndex` changing or `scrollToRow()` being called); changing this prop alone has no effect. Useful for accounting for a sticky header so that the target row is not obscured. |
| scrollTop | Number | | Forced vertical scroll offset; can be used to synchronize scrolling between components |
| style | Object | | Optional custom inline style to attach to root `List` element. |
| tabIndex | Number | | Optional override of tab index default; defaults to `0`. |
| width | Number | ✓ | Width of the list |

### Public Methods

Expand Down Expand Up @@ -63,11 +64,13 @@ This method will also force a render cycle (via `forceUpdate`) to ensure that th
Scroll to the specified offset.
Useful for animating position changes.

##### scrollToRow (index: number)
##### scrollToRow (index: number, offset?: number)

Ensure row is visible.
This method can be used to safely scroll back to a cell that a user has scrolled away from even if it was previously scrolled to.

The optional `offset` parameter applies an additional pixel offset on top of the calculated scroll position, overriding the `scrollToOffset` prop for this call. Useful for accounting for a sticky header so that the target row is not obscured.

### rowRenderer

Responsible for rendering a single row, given its index.
Expand Down
Loading