DEV Community

Discussion on: React: Super Simple Smooth Scrolling

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Personally cannot stand websites that do stuff like this. People expect websites to scroll as normal when they use the mousewheel etc. - it's very annoying when a site breaks this behaviour

Collapse
 
holdmypotion profile image
Rahul

I agree this could be annoying.
But each website serves a different purpose. It might irritate users of a commercial corporate website. But it could do wonders when used properly in portfolio websites or Product landing pages or maybe websites that provide a totally different experience than the old school websites.

I have seen a bunch of websites that implement this kind of scrolling and it feels beautiful.
Here, check them out :)
nahelmoussi.com/
boyntonyards.com/
jesperlandberg.dev/

Collapse
 
philipjc profile image
Philip J Cox

nahelmoussi.com/

Really is lovely design.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Sorry, I didn't make my point very clearly...

It can work where the interface is plainly not a 'normal' page - but rather a specialised interface that is being controlled using scrolling. If this is self evident from the page - the user will probably not have the expectation of scrolling working in the normal manner.

This type of interaction can indeed can be very effective. However, care should still be taken with the 'feel' of the scrolling - the first of the examples above is fine in this respect, but the others feel a little too elastic. They all look nice though.

In your own example, the page is plainly and clearly a 'normal' page. Breaking or screwing with basic website operation on such a page could well confuse the user or make them question what is going on since the page appears to be a normal one.

When using a site - the user should never be made to question or think about the interactions unnecessarily.

You should read Steve Krug's "Don't Make Me Think"

Thread Thread
 
holdmypotion profile image
Rahul

Gotcha!!
I absolutely agree. But the only reason why the example is a 'normal' page is that I wanted to save myself from writing CSS and stuff. The only purpose of this example is to showcase the smooth scrolling effect. I already stated in the 'Section.js' section, "Just a react component to fill up some space in our scrolling Container"

I agree with your point, BTW. And thanks for the recomendation.
I haven't read that book. I surely will!

Collapse
 
andresausecha profile image
Andres Ausecha Mosquera • Edited

I personally do something similar in our website and works fine in my opinion. Regarding the mousewheel, a third of our users are not in desktop so you can't just consider a mouse

Collapse
 
ikirker profile image
Ian Kirker

I just tried the link on an iPad and it feels like the whole thing is attached to rubber bands. Let the browser smooth scrolling itself.