So You Wanna Mimic Frameset Scrollbars?

Ah frames. Now there’s a technology that will take me back to the mid-1990s. One of my favorite Harry Potter fanfiction sites used frames to nice effect for chaptered stories, and I considered framesets to be a fine solution for simple sites built by non-developers. But if you can handle a little programming, then frames should be out of the question. Even in 1998, that’s 15 years ago now, when I built my first page, PHP provided the very simple include function that solved the problem frames were meant to solve.

And, indeed, the modern client of my dev skills is easy to convince that the server should handle constructing pages, and that AJAX should be used to update portions of a page. But every once in a while you get a bizarre request, one so weird you have to share it. And that happened to me this year. I was asked to mimic not just the functional behavior but also the stylistic behavior of a frameset. And not just any frameset, but a frameset with this basic definition: (forgive the lack of angle brackets–WordPress does like to make sharing code difficult…anyone have a favorite plugin?)

frameset  rows="63,*"
    frame noresize
    frameset cols="200,*"
        frame name="left" scrolling="auto" target="right"
        frame name="right" scrolling="no" target="_self"

Yes, friends, that’s a nested frameset. And yes, it involves 2 frames which are dynamically sized by the browser and a header frame which is not to be resized at all. Also of interest–the scrollbars, which the client needed a surprising amount of convincing that they would be a terrible feature to mimic. I believe I used the word “baffled” that anyone would actually want all these scrollbars, and refused to implement any scrollbars beyond what the browser window gives us. As my fellow HP fans can attest, sometimes you have to do what is right, not what is easy. It would have been all too easy to throw my hands up and say “Fine! Let’s do some frames!” but then angels would have fallen and hell would have frozen over. Worse, users would have to deal with multiple scrolling regions, including the main menu. Can’t have that on my conscience.

And then, I was asked for some additional scrollbar behavior that baffled me. They wanted the header area to do something rather peculiar. Not only should the header not wrap when the window is sized too small to fit horizontally, but the window’s scrollbar should ignore that overflow and only be applied when the content area reached it’s minimum width.


This one took some out of the box thinking. You can see my solution here at this fiddle. It does require a bit of scripting, due to the resizable content area, but our app was already heavily relying on AJAX and other scripting techniques so I decided that scripting my layout was acceptable in this strange case. I’m not sure it’s even going to be useful to anyone, but if you are struggling with recreating a weird scrolling experience based on a very old frameset design, then maybe, just maybe, I’ve got something good for you.

Leave a Reply