IE 9 Horizontal Scroll Bar Issue

**codefactor** · 08-26-2011 06:59 PM

The problem

There is a bug that I'm working on which involves a page that contains a portlet with a fixed width and horizontal scroll bar - the scroll bar does not appear to work in IE 9, but all other browsers seem to be fine.

For simplicity I reduced the page to the following HTML snippet containing the style and javascript.

This HTML document displays a scrollable div with some text and a section that is right aligned which is updated via javascript so that it will continually displayed as right aligned.

And yes, there are many other ways to accomplish this using pure CSS, but what I don't understand is this - why does updating the style.left of some child element stop the scroll from happening?

It just doesn't make sense to me. Also... the reply "IE is just weird/buggy..." is not what I'm looking for

The Code

Available as a gist

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
#scroller{
  overflow: auto;
  width:500px;

  /*
    Remove height:100% and you get some weird behavior in IE9.
    The initial scroll stops, but second scrolling attempt works
    but the scroller div keeps growing vertically any time you
    scroll horizontally.

    Keep it, and the horizonal scroll is basically useless.
    Clicking the handle only scrolls one pixel, clicking the
    arrow buttons will only allow one scroll (continuous scroll
    is not working). Clicking the trough (or track) seems 
    unaffected
  */
  height:100%
}
#content{
  width:600px;
}
#buttonBar{
  position: relative;
}
#buttonArea{
  float: right;
}
</style>

<script>
function onScroll(scroller, event) {
  var buttonBar = document.getElementById('buttonBar');
  buttonBar.style.left = scroller.scrollLeft + 'px';
}
</script>
</head>
<body>

<div id="scroller" onscroll="onScroll(this,event)">

  <div id="content">Scrolling Content</div>
  <div id="buttonBar">
    <div id="buttonArea">
      Right Aligned
    </div>
  </div>

</div>

</body>
</html>

**DracoMerest** · 08-28-2011 02:52 AM

Ha! You should see what is does is IE7. While the scollbar is functional and the Right
Aligned text is stationary, the whole thing is odd. (I am not willing to get IE9 yet)

Guesses, wild and accusatory, aside from IE9 sucks?

Is the event being stolen from IE by your function? That is, is the event being ignored by
the browser since you've hijacked the event? Only a slight chance of this being the
problem. A possible solution for this hypothetical problem is return false or return true
from the onScroll function.

Additionally, try changing the name of the function to something which does not
resemble an event name.

You've already got position:relative; so maybe you've tried absolute already.

Is there any error console in IE9? If, for some reason you've caused an error, I wonder if
IE9 will hang.

Try <script type="text/javascript"> just to be pedantic and/or remove the strict
specification of your DOCTYPE.

Good luck.

**codefactor** · 08-29-2011 01:40 PM

Thanks Draco for your feedback.

Is the event being stolen from IE by your function? That is, is the event being ignored by the browser since you've hijacked the event?

Can you elaborate more on the hijacking of the event? If by this you mean that I've included the event on the function call in the <div id="scroller" onscroll="onScroll(this,event)"> - because in this example I'm not using the event I removed this and it does not affect the behavior either. But still I'm interested in what you mean by hijacking the event. I didn't know it was bad form to do this.

You've already got position:relative; so maybe you've tried absolute already.

Yes i could easily put position:absolute;right:0px; on #buttonBar and then position:relative on #scroller (and account for the space on the bottom with some padding because position:absolute removes the button bar from the normal flow which means it will be on top of the scroll bar) - and then i don't even need the javascript...

however - as i mentioned - that is a better way to solve the same problem, but what I'm interested in is ... what am I doing wrong here, and why is IE 9 not letting me scroll the box??

As for your other guesses:

Additionally, try changing the name of the function to something which does not resemble an event name.

The name of the function is not contributing to the problem. I can change this and the behavior is the same.

Is there any error console in IE9? If, for some reason you've caused an error, I wonder if IE9 will hang.

Yes there is an error console using F12 developer tools (which comes automatically in IE9). That was the first thing I thought of - there are no JS errors. If you put a breakpoint, you can step through the code and on the surface nothing seems to be wrong - except that the horizontal scroll doesn't work.

Try <script type="text/javascript"> just to be pedantic and/or remove the strict specification of your DOCTYPE.

This also does not affect the behavior.

Here is a modified version of the original with the following changes:

Changed doctype to transitional
Added type="text/javascript" to the script.
Changed the function name to not coincide with the event name.
Removed the comment in the CSS
Removed the event argument in the function call.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
#scroller{
  overflow: auto;
  width:500px;
  height:100%
}
#content{
  width:600px;
}
#buttonBar{
  position:relative
}
#buttonArea{
  float: right;
}
</style>

<script type="text/javascript">
function moveTextOver(scroller) {
  var buttonBar = document.getElementById('buttonBar');
  buttonBar.style.left = scroller.scrollLeft + 'px';
}
</script>
</head>
<body>

<div id="scroller" onscroll="moveTextOver(this)">

  <div id="content">Scrolling Content</div>
  <div id="buttonBar">
    <div id="buttonArea">
      Right Aligned
    </div>
  </div>

</div>

</body>
</html>

Oh - and one more quote

(I am not willing to get IE9 yet)

Neither am I!! But I use a VM image that I got from a co-worker that lets me use it (I am not even willing to get Windows 7 on my work PC either). Unfortunately for me customers like IE even though I personally hate IE and wish it would just die.

**codefactor** · 08-29-2011 02:49 PM

One thing i forgot - I updated the onscroll to have "return true" and the same problem happens.

Note: if you comment the line
// buttonBar.style.left = scroller.scrollLeft + 'px';

The scroll works - but the text obviously will not stay right aligned.

**DracoMerest** · 08-29-2011 10:50 PM

I had a play with it and put borders around them all. Interesting that FF6 shows no
height for buttonBar. I doubt this has any effect on the problem. Speaking of height,
the scoller DIV has a height of 100%. 100% of what? The parent has no specified
height. Remember that many CSS attributes cannot be changed if they are not
specified initially.

I added a width to buttonBar of 100% and found that the width of content can be
increased when the mouse drags the scrollbar way off to the right. Very odd. Setting
the width to 99% seems to make it function correctly. I wonder if this has solved the
IE9 problem?

I may have to set myself up a spare computer and fill it full of every browser I can find.

Code:

<style>
#scroller{
  overflow: auto;
  width:500px;
  height:100%
}
#content{
  width:600px;
border:1px solid black;
}
#buttonBar{
  position:relative;
border:1px solid red;
width:99%;
}
#buttonArea{
  float: right;
border:1px solid blue;
}
</style>

**codefactor** · 08-30-2011 12:16 PM

I may have to set myself up a spare computer and fill it full of every browser I can find.

If you haven't already done so, you should try out VMWare player and get a base install of Windows XP and another with Windows 7. That way you can make copies of the images so you can install every version you want of IE/FireFox/Chrome without any conflicts. The only thing you have to pay for, of course, is the Windows licenses (and of course the huge amount of hard drive space it will take).

And about the height 100% - I'm not entirely sure about why that was put there to begin with - but it does contribute to the problem. You can see my original comment

Remove height:100% and you get some weird behavior in IE9.
The initial scroll stops, but second scrolling attempt works
but the scroller div keeps growing vertically any time you
scroll horizontally.

Keep it, and the horizonal scroll is basically useless.
Clicking the handle only scrolls one pixel, clicking the
arrow buttons will only allow one scroll (continuous scroll
is not working). Clicking the trough (or track) seems
unaffected

This div height growing vertically as you do things causing the page to grow inexplicably is something I've ran into with IE 9 before. And I really can't figure out why it happens.

**ana.ban101** · 12-26-2011 12:20 PM

i realize i'm months behind on this, but this stumped me yesterday and found this thread. hopefully my answer helps:

it's the overflow: auto in #scroller that's messing things up. you'll have to change this to scroll, possibly:

Code:

#scroller {
    overflow-x: scroll;
}

if you don't want the vertical scrollbars.

note that you'll have to code your js to determine if you need a scrollbar so you can set overflow-x to visible (the default) if there are no overflows and scroll if there are, simulating auto.

**soundstorm81** · 12-04-2012 05:06 AM

Being an issue I have just come across and after searching around I found this page to be useful. However I came up with a solution that is in javascript (jQuery):

Code:

if (document.documentMode && document.documentMode == 9) {
    var contentHeight = $('#'someEle')[0].scrollHeight;
    var maxHeight = 500;  
    if (contentHeight > numericalMaxHeight) {
        $('#' + contents.tableName + '_wrapper').css('height', maxHeight + 'px');
    } else {
        $('#' + contents.tableName + '_wrapper').css('height', '100%');
    }
}

Hope this helps someone.

**soundstorm81** · 12-04-2012 05:09 AM

Sorry I did not take out all my own specific code!

Code:

if (document.documentMode && document.documentMode == 9) {
* * var contentHeight = $('#someEle')[0].scrollHeight;
* * var maxHeight = 500; *
* * if (contentHeight > numericalMaxHeight) {
* * * * $('#someEle').css('height', maxHeight + 'px');
* * } else {
* * * * $('#someEle').css('height', '100%');
* * }
}

Thread: IE 9 Horizontal Scroll Bar Issue

Thread Tools

Display

IE 9 Horizontal Scroll Bar Issue

it's the overflow:auto

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions