How to scroll form panel at top? - javascript

I am working on a sencha touch mobile app. There is one form panel having many fields so I kept it as scrollable. when I open that screen (panel) and scroll down. and go back to other screens and again come back to that screen panel, it remains scrolled down at bottom position. I want to always set it at the top when I will open it. I have tried some code on activate event of that form, but it doesn't seem to be working.
I have tried to belove code in the activate event.
this.formPan.element.dom.scrollTo('top', 0);
//this.formPan.reset();
//Ext.getCmp('mainscreenpanelId').element.dom.parentElement.style['-webkit-transform'] = 'translate3d(0px, 0px, 0px)'
//--3rd commented line of code works, but after activate/on focus form again it comes to last scrolled position--
also, I checked if any method is there to scroll at the top, but didn't found.
Is there any way to do that.
below images more discribing my issue, screen is default when we open form first time
2nd Image remain srolled at bottom.

I have used window.scrollTo(0, 0) to scroll screen always top.
Try this.

Related

Angular 8 cannot get child panel to scroll properly to top of screen

I have a parent component that has 4 child components inside of it, each of them a primeNg panel with a form inside of them. The first 3 panels are expanded at all times(the collapse and expand icons are set to empty strings) and the last one is collapsed on load. On the last panel, I have a button that allows you to "Edit" the information which appears inside it and expands the panel.
What I would like is for this 4th panel to then get pulled to the top of the screen. However what actually happens is the panel expands and the scroll bar moves up, but the panel itself stays put.
I have tried several different options to get this working using various combinations of scrollTop, offsetTop, scrollIntoView, etc but nothing has worked. The scrollbar moves but the content does not, it stays where it was.
I even tried to set the id to an element half way down the form on the last panel and then used scrollIntoView: {block: 'center'} as an option...still nothing, same thing, it scrolls the scrollbar but not the content.
Can someone help me out with this and let me know what I am doing wrong?
in parent component:
<p-panel1></p-panel1>
<p-panel2></p-panel2>
<p-panel3></p-panel3>
<p-panel4 id='scrollToHere'></p-panel4> <---I want to scroll p-panel4 to top of the window
when the edit button is clicked
UPDATE:
Got it fixed by using setTimeout(document.getElementById('scrollToHere').scrollIntoView({behavior: 'smooth', block: 'start'}),0)
gotta be one of those weird DOM things where it tried to scroll before the panel was expanded...will try and change it to onAfterToggle but not sure if that will work because I am not using the icons and using a button to do it.
#Matte the scroll into view should work. But it seems that the scroll into view is triggered before you contents are expanded so try with some delay. And there should be more page content below your last panel if there is nothing and it is the last thing on page then the page would not scroll to the top of the height is smaller then the screen

JavaScript/Vue.js: How to execute multiple methods at once before the DOM updates

Here is what I am trying to do: When the user is clicking a button, a transparent overlay is opening. The background shouldn't be scrollable but stay at the scroll position. So what I am doing at the moment is that once the button is clicked, I safe the current scroll position via window.scrollY, then add overflow: hidden to both the html and body tag (which unfortunately scrolls the page to the very top), then proceed to scroll to the saved position inside the main div of the website. In most browsers these steps aren't noticeable so it seems like everything just stays at the same position. In Safari however, you can see that for a few ms the background scrolls to the very top and then back again.
So what I would like to know is how to execute multiple methods at once before the DOM updates. Or maybe you can think of another way of doing this?
Thank you!

Javascript scrolling menu that starts only after a certain ways down the page

I want a scrolling menu that begins at a certain part of the page (like under the header), but stays there till you scroll down and it hits the top of your browser window, then follows you down the rest of the page.
Anyone have any clue how to do this? I can't find it anywhere on the net. I've seen others similar to it, but none that move to the top of the window.
There's a great example on gmail when you are viewing an email. The toolbar stays at the top of the email box, but once you scroll past the email box, it follows you down the page.
I know that position:absolute;top:0; will make it stay at the top without the fluid motion (I hate it because it looks sloppy).
** edit **
I really only need to know how to detect that the menu div is at the top of your page. I can do a mock thing where if you scroll down how ever far the menu div is, it will start scrolling down, but I'd rather actually get whether the menu div is past the browser window or not.
It's a mixed position of fixed and absolute, you will handle.scroll event and switch between that.
You can find an example here
Creating a floating box which stays within a div

jScrollPane JS Library - Why "end" button disables the input field at the bottom of the page?

We have a pop up iframe (using prettyPhoto) inside of which we use jScrollPane for a custom vertical scroll bar. Scroll bar works fine except 2 problems.
1) When you go to the end of the page by pressing "end" key, the input field, which is located at the bottom of the page doesn't work properly. You can activate it (you see the flashing cursor), but when you try to type anything, it won't work. When you use slider or arrow keys to get to the bottom of the page, it works fine.
2) When new content is appended to the bottom of the page using $.append() or scroll_bar.getContentPane(), it doesn't recalculate the height of the page, and the scrollable area stays same (which is less than real height). I tried to reinitialize jScrollPane, but it didn't help either.

Stop the window showing top of page when revealing Absolute DIV

I have an absolute DIV with a large top css value. It begins as a hidden DIV and is revealed by slideToggle (jquery) when a button is pressed. This is fine for divs at the top of the page.
If there is a button off the bottom of the window, and needs to be scrolled down to - when it is clicked the hidden DIV appears beside the button because of its large top value - 400px or bigger. However the window goes back to top of page, and you have to scroll back down to view the content.
Can the window be stopped from jumping to top, and have the revealed DIV in the same position, yet dont have to scroll to see it?
I think the question you asked and the answer you want is very similar to this:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

Categories