I have a div filled with enough elements that makes the scroll bar appear.
I scroll down half way and then refresh the page.
The div is now empty so it has no scroll bar since its set to
overflow:auto
Then I set the div to reset its scroll position with
$(".myclass")[0].scrollTop = 0;
Then I add the elements to the div again and it scrolls back to the halfway mark that it was at before the refresh emptied it.
It seems that the div ignores the command to set the scroll if the scrollbar is not visible and active.
How can I set the position of the scrollbar back to the top while it is empty?
edit: I made a really hacky solution by adding a massive div to make the scrollbar appear and then I remove it after I set the scrollTop to zero, but there should be a better solution than that.
Related
I have an autocomplete. When the dropdown appears, it may go out of view because it is close to the bottom.
The height of the div that contains this dropdown is increases. However, it does not automatically scroll to the end.
How to get it to scroll to the end?
I have a page where an image is decreased in size while scrolling. Once it reaches a specific size another image appears. From there on the scroll behavior should be the same as in scrollytelling approaches.
My problem right now is that all the subsequent div's are not "waiting" for this event of image change. I can only tell the first subsequent div to stop until this event occurs and change its position to relative once it occurs. But with this solution, it seems to be more messed up.
Here is a JSFiddle with a sample setup. I would like that none of the text div's move until the red div appears. And then it should start moving from its current position.
I could solve the issue myself (in some way).
I added a container div to all content after the div with the images and made its opacity: hidden. While scrolling, the content is actually scrolling upwards, but it cannot be seen. Once the images change I add a margin-top to the content container with the value of the scrolled distance (+ some buffer) and remove the opacity: hidden class.
Here is a JSFiddle
However, this is not the solution described in the question, where the content should be visible and "wait" at its position, but for my circumstances, it is an acceptable answer. But I will not make this the accepted answer of my question.
I am trying to achieve an effect similar to on this website here: https://www.wokine.com/en/ where you scroll down and the 'HELLO' text moves to the side. I have done that part, but I am stuck on how to pause the page from scrolling after that but still, keep the scrollbar moving. I need this to happen so I can use jquery to re-enable scrolling after the user scrolls down to a certain point.
The link explains it a bit better than I can with words.
Page scrolling is never paused or disabled is just a "trick"
Let the 'HELLO' element be fixed positioned until scrolling reach the point where you want the element to start moving up.
During the first stage ('HELLO' fixed) you can detect page scrolling and perform animation on the element.
Second stage, when you want 'HELLO' start scrolling, switch its positioning to absolute (or relative) and at the same time set its vertical position top at the same coordinate the page has been scrolled to (window.scrollY)
I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??
Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.
I need a small widget on a web page such that when the page loads in a maximized window, the element appears to be inline.
When the vertical scroll bar moves down, the element scrolls up until it hits the top visible line of the browser control. Thereafter if you scroll further down, this elements sticks at the top border of the browser.
In other words, if there is enough screen area and if it can be visible on the current window, it appears inline and the moment its inline position goes out of the visible window due to scroll, this elements sticks to the border it hit and stays there until the scroll brings its inline position back into the visible window.
I need to achieve this purely via CSS only - no javascript. Any idea how this could be done?
Thanks in advance for looking this post up.
You can make your view with position: fixed, so that it remains on the visible area.
.selector {
position: fixed;
/* rest required styling */
}