double scrollbars with "overflow-y: scroll" on IE7 when using cssstickyfooter

6 בנובמבר 2010

תגיות: , , ,
תגובה אחת

The Point:

cssstickyfooter is a great solution for a sticky footer(works even at the crappy IE6).
Alas, when trying to set body{overflow-y: scroll} you get a double scroll on IE7(which is also pure crap and should die).

The solution for this one is to set the style on the html: html{overflow-y:scroll} 


Some details:


Abused the cssstickyfooter site(as it uses it’s technique) to show the double scroll.

To try it just open it in IE compatibility mode, hit f12 and at the script tab type: document.getElementsByTagName("body")[0].style.overflow = "scroll"


I like having a vertical scrollbar on my designs,

this way if a page is loaded without a scroll and then some action loads data that adds the scroll,

the page doesn’t “jump” as the scroll is added.

Usually I add the scroll to the body, but that caused the double scroll on IE7 when I used the cssstickyfooter.


Didn’t have the time to check why, and most of the pages in my app have a big scroll,

so left it for later and removed the definition.

Till saw @getify’s confession which triggered my interest to check this once again,

the answer came from @Brodingo , feel stupid I haven’t tried it when I encountered the problem.


This is one of the things that are great about twitter – one confession can lead to the solution of a long time annoying problem 🙂

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

תגובה אחת

  1. thanks11 בפברואר 2011 ב 6:45

    Toda raba from Melbourne Isaac !