I have a dynamic page where clicking a link triggers some javascript that sets some page elements to display:none, and thus changes the height of the page. The typical browser behavior for this is that the scroll position from the top of the page is retained. I want to retain the scroll position from the bottom instead, because the link is near the bottom of the page and I would like the user's cursor to remain over the link after it is clicked.
The code I have to do this is:
var scrollBottom=getDocHeight()-getScrollTop();
//do stuff to change height
window.scrollTo(0,getDocHeight()-scrollBottom);
(using cross-browser functions I found to obtain document height and scroll position).
This works fine in chrome and internet explorer, but in firefox, there is a small delay between the page height changing and the scroll position changing. As a result there is a flicker as the page quickly realigns itself, which is bothering me a great deal.
Can anyone suggest a fix or a more natural way to remember the scroll position from the bottom of the page instead of the top?
Thank you.
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
I have some code using jQuery's scrollTop(0) method which is not working correctly on Chrome (Version 56.0.2924.87).
My code sets a 2 second timeout which does the following:
Scrolls to the top of the screen.
Un-hides a div which has 100% width and height and requests the user to complete some action.
Appends a class to the html tag which sets overflow: hidden.
Once users completes the action it will remove the class and hide the div so they can continue scrolling.
This is working relibaly on Firefox.
On Chrome, if the 2 second timeout executes while the user is not scrolling, then it works as expected. However, if the 2 second timeout is called while the user is in the middle of scrolling, it seems to freeze.
I have created this Plunker containing all the code. The issue does not occur if you test within the in-line demo window, you need to click on the Preview in a Separate Window (blue button top right inside the code demo).
In my demo, this is what happens if the timeout runs while I am not actively scrolling:
And this is what happens if the timeout is executed while I am scrolling down (mid-scroll):
How can I make this work reliably on Chrome even if the user is currently scrolling on the page?
Why you can not see the div when is display. When the event is called in the middle of the scrolling the scroll bar hidden and the div apper at the top of your page, but your viewport is not at the top position. If you set the div CSS position property to fixed it will work, css position. the fixed value of the position property is relative to the viewport.
So the problem is not on your jquery code.
code here
plunker
And check this:
Scrolls to the top of the screen.
Once users complete the action it will remove the class and hide the div so they can continue scrolling.
I think it will be best if they can continue at the position the wear before.
What about if you add stop(). before the .scrollTop(0)?
$('html,body,document').stop().scrollTop(0);
I am not an expert, but may be worth a shot.
Hope it helps.
I am designing an interactive web game that takes place entirely in the browser. It uses html5, and everything (including the elements) is part of the game world. Since this is the case, I need some pretty strict control over the positioning of my elements, scroll position, zooming, etc.
One particular level requires that an element be placed off screen (just outside the viewport) so that the user must scroll the page to find it. Unfortunately, after scrolling, the page seems to record the new width of the page including the originally unseen element. When the page is refreshed, the zoom level is adjusted to fit the entire screen with the hidden element into the viewport. This gives away the puzzle and ruins the level.
I know that browsers store information like scroll position so that when a user revisits the page they can pick up right where they left off. This is great for some things, but bad for my purposes. Is there a way to prevent this caching behavior of my browsers? Is there a way to get or set the zoom level of a page using JavaScript?
Currently I am using the code below to reset the scroll position right before the user leaves the page. It works pretty well, but the user can see the page scroll right before leaving.
window.addEventListener("beforeunload",function(event_){
window.scrollTo(0,0);
/* What I would love is if there were a way to do this: */
// window.zoomTo(1.0);
/* But I'm sure that's asking for too much. */
});
I managed to fix my problem by keeping the hidden element out of the html flow all together by setting its css position property to fixed. I simulate page scrolling by changing the elements style.left value with some custom touch event handlers. The page has no need to resize or zoom with the addition of the off screen element because fixed position elements do not effect layout.
This doesn't answer my question about resetting the zoom level, however, and I would still appreciate any insight anyone may have.
I have a webpage that loads comments from a MySQL table, by appending "comment" divs one at a time into a collective "comments" parent div. However, this has caused some problems with scrolling in Google Chrome. I've tested this behavior in Firefox and it works fine there.
If I refresh the page anywhere above where the bottom of the page would be without any comment divs, the refresh works just fine and the scroll bar is where it should be.
However, if I refresh the page after scrolling beyond the first appended comment div, the page sets the vertical scroll position to where it would be if the comment divs weren't appended at all. I can't scroll down with the mouse wheel, as if Chrome thinks the divs were never appended, even though they are clearly there and the scrollbar shows them to be there.
If I scroll up one tick of my scroll wheel from there, the page scrolls "up" to where the scroll bar would be after scrolling up one tick from the actual bottom of the page, with all of the comment divs appended. It's like the scroll bar is in two places at once, the "bottom of the page" if the comments weren't appended and the actual bottom of the page with the comments appended. Very confusing.
Scrolling by clicking and dragging on the scrollbar works just fine. Likewise, scrolling "up" and then scrolling either up or down from there works too. I just can't scroll downward without scrolling "upward" first or starting the page refresh at a point other than one below where the bottom of the page would be without the comments appended.
I'm not entirely sure what's going on or how to fix it, and the only other mention of this I've seen on the internet doesn't have an explanation or a solution. Would anyone be familiar with what's happening, why it's happening, and how to prevent it?
I'm trying to find the best technique for showing a navigation/menu for a mobile site I'm working on. So far all my solutions have flaws, and I was wondering if anyone could point me in the right direction. (You may have to reduce browser window size to make the examples work as intended)
First off, take a look at this "basic" example: http://audunaas.no/menu/problem.html
You'll notice the content is still scrollable while the navigation is open. This is confusing and annoying.
My first attempt at a fix was to set the body to overflow:hidden and position:fixed whenever the navigation is open. Example here: (Had to remove link because maximum 2 links in post)
This, however, causes the body to snap back to the top and "forget" its scroll position. This means you are taken back to the top of the page whenever you open the navigation. Not good.
Lastly, my best solution so far is one where i put all the page content inside a #scroll-area-div with a fixed position taking up most of the screen, and body scroll set to hidden. Example here: http://audunaas.no/menu/
This solves most of the problems in the page itself, but breaks the "memory" of the back button. This means whenever you click back in your browser you are taken to the top of the page instead of back to where you were before you decided to click a link. (Mobile safari seems to be the only browser that remembers scroll position on div's aswell as body)
I can't really think of any more solutions to this, except for maybe some sort of javascript. Does anyone have some experience with similar cases, or any ideas on how to accomplish this?
The solution must:
Prevent scrolling on page content when navigation is open
Preserve scroll position on page content when navigation is open
Remember scroll position on previous page when back-button is used