Помогите со скроллом...

Добрый вечер.

Есть следующий код:

#demo {

 background: #efefef;

overflow:hidden;

height: 295px;

 width: 100%px;



}

#demo img {

margin:0px;

padding:0px;

}

#indemo {

 float: left;

 width: auto;

width: 800%;

}

#demo1 {

 float: left;

}

#demo2 {

 float: left;

}















<div id="demo">

<div id="indemo">

<div id="demo1">

<a href="/?page_id=37"><img src="http://kokan.guginot.ru/img/1.jpg" border="0" /></a><a href="/?page_id=30"><img src="http://kokan.guginot.ru/img/2.jpg" border="0" /></a><a href="/?page_id=32"><img src="http://kokan.guginot.ru/img/3.jpg" border="0" /></a><a href="/?page_id=35"><img src="http://kokan.guginot.ru/img/4.jpg" border="0" /></a><a href="/?page_id=21"><img src="http://kokan.guginot.ru/img/5.jpg" border="0" /></a><a href="/?page_id=36"><img src="http://kokan.guginot.ru/img/6.jpg" border="0" /></a><a href="/?page_id=41"><img src="http://kokan.guginot.ru/img/7.jpg" border="0" /></a><a href="/?page_id=39"><img src="http://kokan.guginot.ru/img/8.jpg" border="0" /></a></div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

    var speed = 30; 

    var tab = document.getElementById("demo");

    var tab1 = document.getElementById("demo1");

    var tab2 = document.getElementById("demo2");

    tab2.innerHTML = tab1.innerHTML;

    function Marquee() {

        if (tab2.offsetWidth - tab.scrollLeft <= 0)

            tab.scrollLeft -= tab1.offsetWidth

        else {

            tab.scrollLeft++;

        }

    }

    var MyMar = setInterval(Marquee, speed);

    tab.onmouseover = function() { clearInterval(MyMar) };

    tab.onmouseout = function() { MyMar = setInterval(Marquee, speed) };

-->

</script>

В итоге получается, что содержимое <div id="demo1"> плавно прокручивается.

ВОзникла необходимость добавить прокрутку. Если поставить

#demo {

overflow-x: scroll;

}

скролл работает, но глючит.

Есть ли еще способ прикрутить норм. скролл?

Спасибо.