Develop Reference

Is there a way to prevent browsers from caching values like scroll position and zoom level?

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.

How to float elements beyond modal container using nyromodal

I regularly employ elements and images that are floated beyond the boundaries of their containers - it adds dimension, assists with spacing and adds a bit of flair.
In this instance I am using NyroModal v2 to load html (a div tag containing various other elements) into a modal window. I had planned an image element (within the modal) would be floated just a bit outside the boundaries of the nyromodal but the modal dialog is clipping the element that goes beyond the modal's boundaries despite position absoloute or relative and regardless of very high z-index.
Looking for suggestions... thanks

Ok a bit more digging using chrome debugger: the nyromodal container has a computed style added to it within the _reposition function:
this.elts.cont.css('overflow', 'auto');
I commented it out and my elements float beyond the border but this is not a solution if your modal content needs scrolling - it will need to fit within the screen or you will likely have unpredictable and unsatisfactory results.
There is another function (hideCont) which sets the nyromodal container overflow to hidden when you close the modal:
nm.elts.cont.css('overflow', 'hidden').fadeOut(clb);
I changed 'hidden' to '' and I have the desired behavior.
NyroModal is on github and perhaps a fork that adds this functionality (without breaking scrolling content) would be useful - I don't have the time so above is my solution - it works for me in this instance and hopefully may be a satisfactory quick-fix for others.

Prevent snapback to original position in iScroll4

I'm using iScroll4 to make a certain element scrollable in my webpage but it snaps back to the original position once you release the mouse/touch. How do I make it stay instead?

I think that I have figured out why this happens. I had iscroll4 working in a Phonegap app that I was building, and then broke it after changing some CSS. At the time, I didn't realize what I had done and I spent a long time hunting for a Javascript solution.
Finally, I noticed that when I tested it in a browser, there was a scrollbar for the list where I was using iscroll4. And when I tried to scroll, the scrollbar thumb changed size. That is why it was snapping back. The browser made the wrapper div big enough to hold the entire list, so whenever I tried to scroll, there was no hidden data so I triggered the pull-up event and then the browser resized the div.
I had to change the CSS to include overflow:hidden and it started to work again. I tried overflow:hidden on the ul tag and the scroller div but that didn't work. It has to be on the wrapper div.

When textbox is resized in IE, block position behavior is messed up

i am using the autoresize plugin which increases the height as users type in stuff. It works great on FF/Chrome, but the behavior is messed up on IE (see screenshots below).
Essentially, the textbox, when resized, does not push the rest of the buttons down, which is weird, given that nothing on the page is absolute positioned.

I suspect the button and span on the right are in a relatively positioned container? I've encountered the same problem recently with positioned elements and expanding/collapsing siblings. Still searching for a proper solution, but removing the positioning can be a temp fix.

Is it possible to prevent just horizontal scrolling when overflow-x is hidden?

I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.
Is there any way to prevent the browser from scrolling horizontally?
As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.

you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.

I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.
If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.

I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.

If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.
You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.

This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)

Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...