Comments (3)
You can do this using DOM listeners and the "scrollContainer.scrollToPosition" method. Just keep track of which element is selected, then calculate the position of the next/previous one, and call the method
Personally I don't think this is something that should be "built in". But all the methods/data to make it possible are here already.
from ngx-virtual-scroller.
@lincolnthree that sounds workable, do you have an example? we are trying to write our custom method with CDK focusKeyManager, but the logic isn't that simple.
from ngx-virtual-scroller.
Unfortunately not a good one. It's pretty embedded in my application, but here's the general idea:
This would track the index of the selected item (and presumably highlight it)
{
key: ["up"],
label: "Editor",
description: "Previous card in list",
preventDefault: true,
command: async (e) => {
if (!InputUtil.isInputFocused() && this.controller.list.isActive()) {
if (this.controller.list.canShiftIndex(-1)) {
UIEvents.stopPropagation(e.event);
this.controller.list.shiftIndex(-1);
}
}
}
},
{
key: ["down"],
label: "Editor",
description: "Next card in list",
preventDefault: true,
command: async (e) => {
if (!InputUtil.isInputFocused() && this.controller.list.isActive()) {
if (this.controller.list.canShiftIndex(1)) {
UIEvents.stopPropagation(e.event);
this.controller.list.shiftIndex(1);
}
}
}
}
Some code for figuring out the item height based on our component / wrapper for the virtual list:
this.list = this.lists.createListManager(CARDS_OVERVIEW_LIST, {
dimensions: () => {
return this.grid?.scroll
? { childHeight: this.grid.scroll.itemHeight, itemsPerWrapGroup: this.grid.scroll.itemsPerRow }
: { childHeight: CARD_ITEM_HEIGHT, itemsPerWrapGroup: 1 };
},
scrollOnIndexChanged: false,
scrollTo: async (_x: number, y: number) => {
this.scrollTo(y + Math.floor(this.grid.scroll._virtualWindow?.nativeElement?.offsetTop ?? 0))
}
});
HostListeners for keyboard binding events in Angular:
@HostListener('document:keydown.ArrowUp', ['$event']) onPrevHandler(_event: KeyboardEvent) {
if (this.isPrevButtonVisible && !this.isFirstStep()) {
this.prev();
}
}
from ngx-virtual-scroller.
Related Issues (20)
- Can't center items HOT 1
- Current slice of visible items change on prepending items off-screen
- use with dynamic size, triggering with document scroll event
- how to set number of items to be displayed default it showing 8 i want to show 24
- Support Angular 13 HOT 26
- Allow scroller width to fit contents HOT 1
- List does not render with multiple child modules using [parentScroll]="scroll.window"
- V4.0.3 not working in production build with fesm5 (Cannot read property 'kind' of undefined)
- Bug with mousewheeling HOT 2
- Scroller stops scrolling (using mouse wheel) unless mouse is moved HOT 4
- get items that plugin killed
- [Angular 5.2.x] - Page get stucked with ngx-virtual-scroller HOT 2
- How to set that how many elements that should render always?
- Doesn't works with grid view normally, displays only 5 items by default and keep updating the data only.
- Are you still maintaining this library? HOT 4
- Viewport items are reduced in half after adding some items
- ngx-virtual-scroller working with angular 16 ? HOT 1
- Not have any support for fix footer section in <tfoot> tag
- issue with 2 virtual scroll if we use scrollbar of same parent block (new version)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-virtual-scroller.