Иначе никак, инфа 100%.)
Вот так оно делается, остальное красивости, их добавить несложно, но долго)
<!DOCTYPE HTML>
<html>
<body>
<style>
*{margin:0;padding:0}
#inner{
background: rgb(16,0,255); /* Old browsers */
background: -moz-linear-gradient(left, rgba(16,0,255,1) 0%, rgba(136,255,96,1) 18%, rgba(234,40,3,1) 46%, rgba(124,188,183,1) 70%, rgba(255,216,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(16,0,255,1)), color-stop(18%,rgba(136,255,96,1)), color-stop(46%,rgba(234,40,3,1)), color-stop(70%,rgba(124,188,183,1)), color-stop(100%,rgba(255,216,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(16,0,255,1) 0%,rgba(136,255,96,1) 18%,rgba(234,40,3,1) 46%,rgba(124,188,183,1) 70%,rgba(255,216,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(16,0,255,1) 0%,rgba(136,255,96,1) 18%,rgba(234,40,3,1) 46%,rgba(124,188,183,1) 70%,rgba(255,216,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(16,0,255,1) 0%,rgba(136,255,96,1) 18%,rgba(234,40,3,1) 46%,rgba(124,188,183,1) 70%,rgba(255,216,0,1) 100%); /* IE10+ */
background: linear-gradient(left, rgba(16,0,255,1) 0%,rgba(136,255,96,1) 18%,rgba(234,40,3,1) 46%,rgba(124,188,183,1) 70%,rgba(255,216,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1000ff', endColorstr='#ffd800',GradientType=1 ); /* IE6-9 */
width:4000px;
height:4000px;
}
#outer{
overflow:scroll;
width:600px;
height:400px;
}
</style>
<div id="outer" onscroll="this.scrollLeft=this.scrollTop">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
inner.style.height = outer.scrollWidth - outer.clientWidth + outer.clientHeight + 'px';
</script>
</body>
</html>