Automatic scroll is not working for certain pixels 320px to 1023px.
Hi everyone, I will not be able to share the code and screenshots for my issue as we have client restrictions. Help me, if you ever faced this issue.
Problem: We have a implementation on our web app that on click of a button the screen automatically scrolls to the top of the page, but this scrolling behavior is not happening for the screen between 320px to 1023px. For other resolutions its working fine.
The code we are using to automatic scroll is
32 Replies
Do you have media queries in your css somewhere that changes anything?
Thats what I also thought about, but I dont see any scroll css being getting changed. Do you know if any other css property can affect the scroll functionality? @hart❤🔥
Not just scroll properties but anything that happens within queries for those breakpoints is what I'd look at. Things like this is always "it depends" bc everything depends on everything else. Have you tested on different browsers, different devices, different oS's?
I just tried on google chrome as of now.
wait a sec, let me try on firefox once
Is the scrolling not working or just the behaviour "smooth"?
scrolling itself not working
not working on firefox as well.
So you want it to scroll to the top of the document or the tip of the form? I would try troubleshooting to put the same function on different elements. You could always just change it scrollTo(x,y) and then in your css , under a @prefers-reduced-motion add scroll-behaviour smooth there.
Dot forget to use dev tools that's what they're there for. Are you getting any errors?
What is that question mark in the code you posted ? After the querySelector function ?
Thats a optional chaining I think, not sure if that is required.
I dont see any error in console.
Let me give it a try, so in scrollTo I can directly apply like this
?
On an event
But yes, are you wanting to scroll to the top of the document or the top of the form ? If the latter you have to find or approximate the x/y axis you want to scroll to
"The optional chaining ( ?. ) operator accesses an object's property or calls a function. If the object accessed or function called using this operator is undefined or null , the expression short circuits and evaluates to undefined instead of throwing an error."
Maybe take off the question mark and see if theres an error
top of the form, I tried that doesnt seem to work.
tried, no luck.
It's within the event ? Dis you check for errors now that you took off the optional chaining operator ?
Within your event, like the button click, try scrollTo(0,0) on the body to see if it scrolls to the top. There is enough content on the page to scroll?
yes enough content on the page.
yeah I removed, no error on console.
its difficult for you to figure out the issue this way as you dont know the exact thing what is happening.
I cant share screenshot too 🥲
Yes it's very hard to troubleshoot without all the code. You have your scrupt linked properly yes? You jave properly selected the button? I would pull out the dev tools and start putting stops around that error and console.logs , old-school
I think the issue is not with code, if that was the issue, it wouldnt have worked for other resolutions. Definitely its styling issue somewhere.
f*** it worked
Wait is it the top of the page or the top of the form? In your post you say top of the page which I didn't see before? Is the form far enough down on the page for a scrollbar ? Is there any position properties declared in that media query? I'd go through and put stops like I said, start commenting out classes from your media queries in that range
waitt
I dont know how but it worked
What happened
😆
I am also checking, how it worked now
🤣
Well , that's too bad you don't know why so you couldn't know how to fix it but good news is good news !
Yeah try to figure out what it was I'm invested and curious now 🤣
yeah I think I added some styling, I am just checking, what exactly it did
styling is breaking somewhere else now. I will take a look @hart❤🔥
but thanks for your help
I will revert if I fix this
❣️
hey @hart❤🔥 , its fixed
What did you learn
About what was happening
To be honest, I really dont how they have written css, but somewhere on the forms-section parent element, the height, height: 100vh; was missing
it works like butter now till I notice a bug in production 😆
Hm that shouldn’t have affected the scroll… heights shouldn’t be set and if they are it should be a min-height to prevent overflow . Content and padding should make up the size.
But either way glad it’s working now
Don’t forget to change to 100svh since it’s gonna be on mobile
oh I never heard of svh
whats that
Helps keep your vh working on mobile browsers to account for the ui like the address bar. dvh and svh are pretty new but fully supported and better fir user experience
(Actually users probably never notice the jump when scrolling down but better for all the devs anxiety and sanity 🤣 )
yeah 😅
thank you @hart❤🔥 once again
welcome to programming 
I ran my C code, got seg fault. Commented out part of code.. still seg fault.. uncommented it.. works
I ran my C code, got seg fault. Commented out part of code.. still seg fault.. uncommented it.. works😆