IE 9 Horizontal Scroll Bar Issue

@codefactorAug 26.2011

~~[SIZE=”5″]~~The problem[/SIZE]

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 ?

~~[SIZE=”5″]~~The Code[/SIZE]

Available as a ~~[URL=”https://gist.github.com/1174684″]~~gist[/URL]

[code=html] <!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> [/code]

to post a comment

JavaScript

8 Comments(s) _↴

@DracoMerestAug 28.2011 — #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.

@codefactorauthorAug 29.2011 — #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?[/QUOTE]

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.[/QUOTE]

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.[/QUOTE]

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.[/QUOTE]

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.[/QUOTE]

This also does not affect the behavior.

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

[*]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.

[/LIST]

[code=html]<!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>[/code]

Oh - and one more quote ?

(I am not willing to get IE9 yet)[/QUOTE]

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.

@codefactorauthorAug 29.2011 — #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.

@DracoMerestAug 30.2011 — #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.

&lt;style&gt;
 #scroller{
 overflow: auto;
 width:500px;
 [COLOR="DarkRed"]height:100%[/COLOR]
 }
 #content{
 width:600px;
 border:1px solid black;
 }
 #buttonBar{
 position:relative;
 border:1px solid red;
 [COLOR="Blue"]width:99%;[/COLOR]
 }
 #buttonArea{
 float: right;
 border:1px solid blue;
 }
 &lt;/style&gt;

@codefactorauthorAug 30.2011 — #I may have to set myself up a spare computer and fill it full of every browser I can find.[/QUOTE]

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[/QUOTE]

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_ban101Dec 26.2011 — #i realize i'm months behind on this, but this stumped me yesterday and found this thread. hopefully my answer helps:

it's the [FONT="Courier New"]overflow: auto[/FONT] in [FONT="Courier New"]#scroller[/FONT] that's messing things up. you'll have to change this to scroll, possibly:

[CODE]#scroller {
 overflow-x: scroll;
 }[/CODE]

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 [FONT="Courier New"]overflow-x[/FONT] to [FONT="Courier New"]visible[/FONT] (the default) if there are no overflows and [FONT="Courier New"]scroll[/FONT] if there are, simulating [FONT="Courier New"]auto[/FONT].

@soundstorm81Dec 04.2012 — #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):

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

Hope this helps someone.

@soundstorm81Dec 04.2012 — #Sorry I did not take out all my own specific code!

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

Also in #JavaScript _↴

How to refresh page?Duplicating same script and making both work???get pages height

Success!

Help @codefactor spread the word by sharing this article on Twitter...

Tweet This

IE 9 Horizontal Scroll Bar Issue

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

IE 9 Horizontal Scroll Bar Issue

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴