The following issues below point to the same problem I am experiencing:
Scroll jumps to the top when List data gets updated
InfiniteLoader jumps when scrolling up after loadMoreRows completes
Adding new items to List causes Scrollbar Jumping
(Using react-virtualized) vsx-registry: scrolling and selecting a tree-node jumps back to the top
And of course My SandBox Here. When you are testing in my sandbox, scroll to the bottom as fast as you can and then stop to wait for loading. A single or multiple jumps will be clearly noticeable.
I am also cross-posting this on GitHub right now. If anyone would come up with a fix that would help a lot of people here using react-virtualized.
Attempts:
When I remove the Cellmeasurer for both the content and the loader and replace row height with a manually defined function, the problem seems to disappear.
To minimize the scenario, I removed the Autosizer and Windowscroller and left with only InfiniteLoader and CellMeasurer. The problem is still there. The jump occurs exactly when rendering the items Infiniteloader appends to the list.
Related
I'm attempting to use react-window-infinite-loader with a FixedSizeGrid from react-window.
Before I start, I created a codesandbox with a minimal example which I'll reference in the question.
The issues I'm having are:
The grid doesn't seem to load all of the items in view. This is seen on initial load where the bottom two items on the first page are still in the loading state. This is strange because according to the docs, the infinite loader will load rows up until the threshold, which is 15 by default.
When scrolling, items near the end of the grid are not loaded in. In the example this can be seen by scrolling to the bottom and the seeing a batch of items in the loading state.
I think that my issues are due to using the infinite loader with a grid but following the example of the list. I think that part of the issue is the isItemLoaded function because the index I get from that doesn't seem to correspond with the index of the item, but I think it's the row?
In the end I'm not sure how to resolve these as the documentation I've seen has the infinite loader being used with a list component instead of a grid component.
I have this animated graph on my website that you have to scroll a bit down to get to. The animation always happens immediately meaning that no one can see it actually being made since they haven't scrolled down yet. I was wondering if there is any way to make it so that that element only appears when the user scrolls to that portion of the screen?
npm i react-bottom-scroll-listener
please refer https://github.com/karl-run/react-bottom-scroll-listener#readme this gives you a listener where you can set a condition and enable it
As anyone can notice it, in the schedule external drag drop demo , someone can drag the event from the TreeView list and when it get near to the right page edge then the page scrolls to the right.
Here is a screenshot showing it.
It's occuring also in our app and it's rather annoying.
We wish there will be a fix for this issue.
Greetings from Syncfusion Support.
We have checked your reported problem that dragging a TreeView node that produces the scroller in the output web page. Currently, we don’t have any property to prevent the scroll when dragging a TreeView node. However, we have already considered this as a feature from our end. It will be included in our Volume 2 Release which is expected to be released in June 2020.
Track the below link to know the feature status.
https://www.syncfusion.com/feedback/13575/need-to-provide-the-option-to-set-the-drag-area-in-treeview-component
But, you can resolve your issue by setting the target for dragArea of TreeView’s drag object in the created event. When setting the target, you can drag the element only inside the target element. It prevents the element from scrolling exceeding that element.
Please, check out the sample with the above explained solution.
Sample: https://stackblitz.com/edit/react-jqzozo-gqpyve?file=index.js
onCreate(){
this.treeObj.dragObj.dragArea = "body";
}
When I am dragging an element down, the form doesn't scroll down when the dragging reaches the bottom.
The reason for this may be that I am manipulating the content of the form by adding an empty placeholder component under the dragged component, and then removing and adding the placeholder each time the dragged component moves over another component. I call revalidate each time the placeholder is removed/added.
Strange thing is that the scrolling works fine when dragging upwards.
Any suggestions for what could be the cause and how I may fix it?
Thanks
I've managed to render a react-virtulized List to which I passed an array of react-bootstrap Panels. I've measured each of my rows, and via children callback, each time one of the child panels are clicked, an attribute in the parent state is updated. Said attribute is used inside the react-virtualized List rowHeight() function top check whether that panel is currently expanded. Then, using a ref to my List, i call the recomputeRowHeights(index) and forceUpdateGrid() methods on saidref.
The thing is, while the List component correctly updates both the height and position of my rows, the animation isn't smooth. I mean, the bootstrap expand animation works fine, but the change in height of the expanded row happens instantly after the click event, and then the animation starts, feeling somewhat chopy.
Is there any workaround for this, or is this an upcoming/planned/in the works feature for react-virtualized?
Unfortunately, I have not spent much time working with or optimizing for resize animations within react-virtualized. It doesn't surprise me to hear that the resize/reposition is a bit choppy in the case you mention.
Here's a quick-and-dirty example of one way you may add animation: plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview. Not meant to be bug free, just an illustration. :D