Of react and scroll jumps/ pseudo tutorial

React

When thinking of react I think of a complex project, going back to the beginning of my history with react, its true I’m not exactly equipped to be a master of it, but I took this and the first bug as practice towards small react projects, yes I’m not an expert but I want to learn and all of my projects haven’t exactly been complex, and the projects i been trying to contribute they are in one way or another interesting to me in some way, this was for reasons you wouldn’t expect This project was dealing with something that is a bit of a leftover from my last bug, I came to this bug when I was looking for solutions of a bug I had during my bug number 3 of Hacktober, now what it was you say? The last project had a bug where scroll decided to jump downwards, now despite having a fairly acceptable fix, without modifying the code, I wasn’t happy about it. So I went looking for similar bugs trying to find some sort similar issue because I was curious if I was doing something wrong

this fix deals with a new feature of current browsers, Scroll restoration:

What is it, in the past browsers didn’t keep the state of a scroll bar and now suddenly same as history they keep the state of the page.

Now in some places this is an unwelcome change applications where we need to keep the state or change state to be different every load, this is what this bug deals with, now an example of how this would look like I’m gonna refer to the tutorial that showed me how our scroll needs would be needed

in picture 1 we notice that we are on a page that has 2 different scrolls

Lets scroll a little in the page

and click in another section

now you can observe that this react site reloads and moves the scroll back to the top, despite being a lazy load/ navigate away on a frame that should not change scroll, as such we need to manually change the scroll back to the top.

Lets look at our solution:


because the tutorial I did does not give you a full picture, or proper instructions unless you are familiar with the language.

In react to create a scroll to top you need a function to do solve this issues in this program we are using the version 16.8 we can use this code

However if running below use the following

now this code needs to be separate from the file that you need to import in your main function (app) you must add it on your imports,

this is my instruction

I’m keeping it in common as it is a common function of the system(same as header and footer if you want the single instruction you can have it here


now that you have this sorted out, you need to add it right after your router functionality.

And you are done!

Now this only solves some of the issues I had with my tutorial I admit I’m not a master of react and other js frameworks which has been my main focus on this projects.

While admittedly this is a fairly simple fix, I hope this helps someone not have the issues I had trying to solve the problem, as clearness is the enemy of many tutorials.

Maybe that’s because I seem to be loving towards business analysis and documentation lately I see a lot of potential to technologies, but nothing that I can consider efficient,(seen before in other frameworks), Documentation is key, and I see that technology needs to get better and better, but our documentation sometimes assumes a lot from the end user, its odd perhaps and a contradiction, this is obviously not the case for everyone or every project but is something I have observed in other projects I worked on

I plan to stay with this project as well if I can, the topic is interesting(fantasy sports) and it works in a language I fan fascinating and need experience at.

Who knows, this could teach me even more than this small fix that I came to after I was trying to redeem myself for not being able to fix a similar issue in a completely different framework.

To see this project in action perhaps visit the project we have this running

https://github.com/JakePartusch/fantasy-tools

to visit the tutorial that helped me suggested by developer himself

https://reacttraining.com/react-router/web/guides/scroll-restoration

Until next time!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s