2

I have a page for my csspp library and tool that makes use of a fixed header and footer. These are fixed when the browser is at least 1,300px wide.

The problem I have is that when those objects are fixed, it changes the size of the area the user can see. However, when you use Page Up and Page Down, these fixed objects are not taken in account (at least not by default). In other words, when you do a Page Down, instead of seeing the next page in the visible area, the browser scrolls down by One Whole Page. I would like to be able to tell the browser to scroll by the height of the visible data (i.e. the length of the arrow in the image below). The Page Up has the same problem. If you start at the bottom of the page and go one page up, you'll miss data roughly equal to the height of the header + footer.

My question is: is it possible to use CSS 3 and/or HTML 5 to resolve this scroll height problem?

I have seen that working on various websites such as wired.com (they have a fixed header), but they use a lot of JavaScript so I am thinking they hacked the scrolling in JavaScript...

enter image description here

Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156
  • 1
    Thanks for editing the question, I think what you want to achieve comes across more clearly now. But I doubt there is a way to achieve this using HTML and CSS only. “Faking” this via JS would probably involve using an element with a much higher (calculated) height to make the browser “think” there was actually much more to scroll, and then “translating” the scrolled amount into a much shorter actual movement of the content by manipulating margins on the body element, or positioning the content area within the body, or something like that … – CBroe Jul 07 '15 at 00:41
  • Just google-ing a little, this problem has come up before (well, not that surprising) – there’s a [Mozilla bug report](https://bugzilla.mozilla.org/show_bug.cgi?id=780345) for it, also a [discussion on codingforums.com](http://www.codingforums.com/html-and-css/295606-page-down-up-scrolling-site-fixed-header.html) that refers back here to SO, [Page Down key usability with a fixed position bar at the top of a page](http://stackoverflow.com/q/6393508/1427878). The latter offers a solution using a `keydown` handler, maybe you want to give that a try. – CBroe Jul 07 '15 at 00:48
  • I also found an interesting page called http://www.thepetedesign.com/demos/onepage_scroll_demo.html which I think would do what I need, but I was wondering whether I could get a solution that works with the normal browser behavior... That OnePageScroll is actually a jQuery extension so certainly easy to use. The code is certainly reusable to make what I'm trying to do visually work as expected. – Alexis Wilke Jul 07 '15 at 01:02

2 Answers2

4

Yes!

<div class="header">
</div>
<div class="content">
...
</div>
<div class="footer">
</div>

And

.header {
    height: 35px;
}
.content {
    overflow-y: scroll;
    position: absolute;
    top: 35px;
    bottom: 35px;
}
.footer {
    bottom: 0;
    position: absolute;
    height: 35px;
    width: 100%;
}

http://jsfiddle.net/p3Lk0Lam/2/

Jan K
  • 365
  • 1
  • 14
  • Just wondering... Why would you need to define the height since you already have the top/bottom defined? Wouldn't that be enough? – Alexis Wilke Jul 07 '15 at 00:24
  • Otherwise, I was hoping for a solution where we don't put the sliderbar in the page, but instead use the main browser ("normal" / window) sliderbar. I already knew of moving the sliderbar to the section/div. But I would prefer to avoid doing so. Those sliders look different and you often need to click in the right area for Page Up / Page Down to work right... It's cumbersome. – Alexis Wilke Jul 07 '15 at 00:30
  • 1
    I see your point. You could take the css further to get rid of the ugly scroll bar, but the problem of needing to click into the correct area to Page Up / Page Down would persist . Haven't been able to come up with anything that solves the whole thing without some little bit of js glue somewhere. – Jan K Jul 07 '15 at 00:41
0

UPD2

If it is OK if you'll have scrollbar in your content wrapper and not in your page, you could set overflow: scroll to content wrapper and set proper height to it with calc() or somehow.

Vlad DX
  • 4,200
  • 19
  • 28
  • 1
    What do you think `position: fixed` in the example image he has shown stands for …? – CBroe Jul 06 '15 at 23:47
  • @CBroe There is no original code provided. And mentioned a lot of javascript code and some library. There is no need to javascript or library. – Vlad DX Jul 06 '15 at 23:54
  • _“There is no need to javascript or library”_ – not for what you are describing; but that doesn’t seem to be what this question is actually about. – CBroe Jul 06 '15 at 23:58
  • There is a link in my question to my page with all the code and the position "fixed" is not the question. The question is about the scrolling, the Page Up and Page Down keys. I also mentioned the 1,300px wide because it has @media entries to make the page work on cell phones. – Alexis Wilke Jul 07 '15 at 00:06
  • Could you be more clear about Page Up and Page Down. What is the problem with them? – Vlad DX Jul 07 '15 at 00:07
  • Seconded; you could/should be more clear about what the actual issue that you want to solve here is. (I think I get it now, but I had to read your question _several_ times to get there.) – CBroe Jul 07 '15 at 00:09
  • @VladimirSerykh The Page Up/Page Down keys do not work right unless you use the `overflow: scroll` on that section which creates a "sub-window" with (in most cases) a crappy slider. I'd like the page to scroll properly (the right amount in Y axis) without having to use that "sub-window" trick. Many pages have a fixed header and/or footer and I'm surprised that we still don't have any control for the amount to scroll on the main scrollbar (I can do it in C/C++, it would not be complicated at all to offer the option to the browser!) – Alexis Wilke Jan 26 '18 at 00:09
  • @VladimirSerykh Btw, the code is in the image. It's very little. – Alexis Wilke Jan 26 '18 at 00:10