jaidanwolf Posted January 28, 2011 Share Posted January 28, 2011 Just a quick question which will hopefully have a simple solution. My site has a fixed layout that requires an internal scrollbar, and it works just fine. However, one frustration is that no matter where you are on the page, if you refresh it jumps right back to the top, which can be a huge pain.I know that it must have something to do with the internal scroll since it doesn't happen on my other sites, but I can't figure out if there's a way to stop that from happening.The site is here: http://tinyurl.com/4l5do76The internal scrollbox CSS code is div.scroll { border: 1px solid #000000; background:#000000 url('images/space.jpg') repeat-y 0 0; color:#ffffff; padding-left: 3px; padding-top: 2px; width:847px; height: 450px; overflow: auto; overflow-y: auto; overflow-x: hidden; margin-left: auto; margin-right: auto;} Is there anything I can do to make the pages refresh normally, without always jumping back to the very top?Also, these types of internal scrolls don't seem to work on units like touchpad, etc. which isn't the end of the world, but if anyone knows of a way to make the site compatible for those types of products, I would appreciate any suggestions.Thanks in advance! Link to comment Share on other sites More sharing options...
jeffman Posted January 28, 2011 Share Posted January 28, 2011 I am not aware of any CSS mechanism that will preserve the scroll state of any element in this way. For user convenience, the document's scroll state is usually preserved, as are the values of form inputs. That's about it.The closest solution I can imagine is using JavaScript to track the scroll position, update the value as a cookie, read the stored value on page load, and scroll the element to the old position programmatically.IIRC, there may be cross-browser issues in such a process. Link to comment Share on other sites More sharing options...
jaidanwolf Posted January 29, 2011 Author Share Posted January 29, 2011 Thanks for the response. In that case, would you (or anyone else) perhaps be able to help me adjust the CSS to accomplish the following effect?http://www.cssplay.co.uk/layouts/basics2.htmlI went through the document but am having trouble figuring out exactly how to adapt it to my existing layout without changing anything except the scroll format. That example has a fixed header and footer but rather than an internal scrolling div, it uses the standard browser scrollbar to do the same thing.Any advice on achieving that with my current setup would be fantastic. My code is as follows:Relevant CSS body { background-color: #000000; color: #ffffff; margin: 7px 0; padding: 0; font-family: Arial, Helvetica, "Times New Roman", sans-serif; font-size: 13px; }p { margin-top: 0; line-height: 18px; padding-left: 1px;}#header { background: #000000; margin: 0 auto; padding-bottom: 0px; width: 875px; height: 43px;}#navbar { width: 875px; height: 76px; margin: 0 auto;}#content { background: #000000 url(images/bg.jpg); margin: 0 auto; width: 875px;} div.scroll { border: 1px solid #000000; background:#000000 url('images/space.jpg') repeat-y 0 0; color:#ffffff; padding-left: 3px; padding-top: 2px; width:847px; height: 450px; overflow: auto; overflow-y: auto; overflow-x: hidden; margin-left: auto; margin-right: auto;} Example html for main page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><link href="style.css" rel="stylesheet" type="text/css" /><!--#include virtual="head.inc"--></head><body><!--#include virtual="header.inc"--><div id="content"><div class="scroll"><h1>Title</h1><p>Text</p></div></div><!--#include virtual="navbar.inc"--></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted January 29, 2011 Share Posted January 29, 2011 The animal you have described cannot exist. You can adapt the bottom, top, and left sides of your presentation to the fixed-header-fixed-footer idea, but your scroll bar will always be against the right side of the window. It cannot be inside the red border as in your current set-up. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.