t-scroll | modern reveal-on-scroll library | Animation library

How do I set up React Router 6 to restore scroll position when I navigate and when the browser window is refreshed?

React Router 5 has a page about scroll restoration, but I can't find anything about scrolling in the docs for v6, so I guess that you're supposed to handle this yourself with another package. Fair enough, but I can't find anything that's compatible with React Router 6.

The packages react-scroll-restoration and oaf-react-router require v5. (oaf-react-router does list that it supports v6, but the basic usage code example isn't compatible with v6, and the related issue #210 is still open.)

Gatsby and Next.js support scroll restoration out of the box, but I doesn't look like there's a neatly packaged package that you can just use.

This little demo app with server side rendered pages does what I want. Scroll position is restored when navigation back and forth and refreshing the browser window.

Here is the same app using React Router 6, where the scroll position isn't saved and restored, but actually reused between pages. The usual workaround for that is to scroll to the top whenever the page is navigated, but I am not interested in that behaviour.

Edit: React Query writes that the issue with scroll restoration is that pages are refetching data, thereby implying that if the data for rendering the pages is there, scroll restoration just works. I cannot confirm that, because my small React Router 6 app has the issue even without doing any data fetching at all. I feel like there is something small think I am missing in order to get it to work.

Rant: I am quite surprised that the typical answer to this issue is to call window.scrollTo(0, 0) when navigating. This only fixes the issue of the scroll position being transferred between pages. When the scroll position isn't restored, the user experience when navigating between pages is seriously deteriorated. I guess this is partly why pop-up windows have become so popular, but they bring a long suite of other UX issues, so I really want to avoid using them.

The navbar is fixed, so when I move to /team. The content of page hides behind the navbar. I tried adding margins but still does not work. Is it possible to add the team component content after the navbar? Here's how it looks

navbar css

I have implemented a search bar on my website and when a name of a product card is typed in it works. However, if you was to type in a word such as "lol' or any other word that is not included on the product cards the footer begins to show. I'm wanting the footer to stay in its current place which is at the bottom of the page.

I will be uploading code snippets and the files to my server so you can view the entire website and the problems I am experiencing.

I hope all of the information provided shows the problem I am experiencing.

[Click the product page to see the problem I am experiencing or click run snippet below][1] [1]: https://kipplo.co.uk/kipplov2

Desired goal: I ultimately want my app to have a fixed, sticky menu bar at the top, then a div/component that contains the rest of the content and not scroll, while allowing the sub-components freedom to scroll when necessary. I will ultimately build this in Next JS, but I can't even make it work in plain HTML/CSS, so I'm unsure of the styles to apply in the Next code. I suspect that I have to apply styles to the outermost tag, but nothing I tried seems to work. I also suspect that (to use Next), I will need to override the Document as they describe in the Next documentation and apply styles to . But first, just in plain HTML...

If I write this in bad, incorrect pseudocode, I'm looking for:

In short: what I only need is this graphic map and the team symbol, without the other data appearing on the screen, wasting space and without the scrollbar on the right side that covers the end of the graphic.

I use the gatsby environment.

Since graphql is used in gatsby, useStaticQuery is used.

It works fine in the development environment(gatsby develop), In the environment after building(gatsby build && gatsby serve), an error like the title has occurred.

Error Text

Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

Error code

I followed this guide to set up swiper slider in my Angular 8 application.

I get the below error when importing NgxUsefulSwiperModule into app.module.ts

ERROR in ./node_modules/ngx-useful-swiper/fesm2015/ngx-useful-swiper.js Module not found: Error: Can't resolve 'swiper/bundle' in 'C:\Users\Dan\NewAngular\node_modules\ngx-useful-swiper\fesm2015'

I tried deleting the node_modules folder and reinstalling everything but it fails every time.

Can someone please tell me what I'm doing wrong?

This is my package.json file

My elements are created from data in a CSV file that updates every 1 minute.

I'm trying to update these elements as follows:

1. Remove those whose data is no longer in the CSV file
2. Create new ones that appeared in the CSV file
3. Keep without edit those that still exist in the CSV file

The CSV file looks like this:

I have created one custom Animated bottom sheet. User can move the bottom sheet scroll up and down. Inside my bottom sheet, I have used flatList where I fetched the data and render the items as a card. Up-till now everything works as expected but I had an issue Flatlist scrolling. Inside the bottom sheet the Flat-list does not scroll. I have made hard coded height value 2000px, which is really practice and also FlatList's contentContainerStyle added hard coded paddingBottom 2000(also another bad practice). I want to scroll the FlatList based on Flex-box. I don't know how to fix this issue.

I share my code on expo-snacks

This is my all code