Stack Overflow
Stack Overflow

Questions tagged [virtualscroll]

A UI technique dedicated to increase the performance of large scrollable lists by rendering only a small portion of the data at a moment and virtualising other parts of the dataset, so that the scrollbar parameters remain consistent and a user experiences the result interface close to the original one (without virtualisation)

enter image description here

130 questions
0
votes
1 answer

how we can fetch new data when scrolling both directions(up and down)

I have created an infinite scrolling using react-virtouso. and it is working proper too. in the given example it fetch data when we scroll-down and when we reach on the end, and it append to existing data. when we scroll-up it show the already fetch…
shafa vp
  • 89
  • 7
0
votes
0 answers

Angular - Virtual scrolling remembering position

When a user select an option within the virtual scrolling it takes them to another route. When clicking the back button I want them to be in the same position within the virtual scroll. I am injecting the CDK CdkVirtualScrollViewport…
Hughesey
  • 358
  • 1
  • 17
0
votes
0 answers

How to register a plugin to use inside a component library running by storybook?

I want to use a vue-virtual-scroller in my component library which requires to be registered as a plugin via app.use() method. However, the components lib has not app instance due it is running by storybook via npm run storybook and main.ts file…
pepeevich
  • 183
  • 1
  • 4
  • 20
0
votes
0 answers

How to make expanded rows in react-virtualized correctly?

Why scroll is jumping? I made the smallest window size (by making console bigger) https://codesandbox.io/s/react-virtualized-expandable-row-forked-9kgmu5?file=/src/Component.js I tried: this._listRef.forceUpdateGrid() // Rerender list with new…
Noname
  • 1
  • 2
0
votes
0 answers

How to load the children on demand in react checkbox tree along with virtual scrolling

import React, { us eState } from 'react'; import CheckboxTree from 'react-checkbox-tree'; import 'react-checkbox-tree/lib/react-checkbox-tree.css'; import { List } from…
saranya s
  • 1
0
votes
0 answers

Checkbox clicks cause FixedSizeList to re-fetch data

I'm using react-window's FixedSizeList component. My list has two columns in the UI - the first one's a checkbox and the other one's plain text. The plain text comes from the backend. The reason why I'm using virtual scroll is that my list can grow…
Sahil Kolwankar
  • 33
  • 2
  • 9
0
votes
0 answers

Implementing virtual scrolling in Vue.js

I'm trying to implement virtual scrolling behavior using vue-virtual-scroller library. First off, I tried to use 'useVirtualList' component from VueUse library, but I couldn't find my way in there. Then I moved on trying vue-virtual-scroller. I…
batt.o
  • 1
  • 1
0
votes
0 answers

Draggable large list performance - Vue js

I have a project in vue 3 where i have to show multiple horizontal lists. The items of those lists must be draggable. When some lists are very large (over 2000 items) the performance of the drag event is very slow. At the moment i am using this…
thomatou
  • 1
  • 1
0
votes
0 answers

Scrolling flickers with cdk-virtual-scroll-viewport

Scrolling works well when I iterate over an array of numbers like this: this.items = Array.from({length: 100000}).map((_, i) => `Item #${i}`); Working html Code is:
Masum Mollik
  • 95
  • 8
0
votes
1 answer

Implement virtual scrolling from scratch in angular 14

I am working on a project where I need to implement a virtual scrolling component in Angular without using any third-party libraries. I found this article about building a virtual scroll in…
Gayan Buddhika
  • 23
  • 1
  • 5
0
votes
0 answers

Drag and drop is not working properly when we use virtual pagination

Drag & drop is not working properly when we use virtual pagination, every time when I scroll down dataset is getting reset due to this I'm not able to maintain the drag position. Is there any other to achieve this? Drag & drop is not working…
Balaviswa
  • 1
0
votes
0 answers

mat-expansion-panel 'closed' event is called with random index instead of 'destroyed'

I am using mat-expansion-panel inside cdk-virtual-scroll. I want to hit a function when the panel is destroyed after scrolling, but the (closed) event is called instead of the (destroyed) event, having a random index as a parameter. …
Kaleem Ullah
  • 36
  • 6
0
votes
0 answers

Scroll and Click-How to click on each row of a list of items and scroll when needed to click item not in view

I have a scenario in which there are n number of items (rows) on the page (table) and only a certain number of rows are in view the first time we are on the page. I need to click on each row in the list and continue clicking the items that are not…
kaushi19
  • 1
  • 1
0
votes
0 answers

How to use 'ng-table-virtual-scroll' if there are millions of records

I am using 'ng-table-virtual-scroll' package for my angular (13 version) project. If my database table has 100k records then how I use this count to add virtual scroll. Can I use this package without making dummy array of 100k items and just use…
Manpreet
  • 155
  • 1
  • 2
  • 12
0
votes
0 answers

Playwright: ScrollIntoViewIfNeededAsync() is not working with virtual scroll?

Locator.ScrollIntoViewIfNeededAsync() is not working because of virtual scroll. I need to use Page.Mouse.WheelAsync() to do the scroll and click on certain node. Have you maybe encountered that situation, and/or have some (other) suggestions how to…
Milan Maksimovic
  • 1
  • 1
1 2 3
…
8 9