Google Chrome 浏览器淡入淡出滚动条的问题

用jquery的淡入淡出，滚动条显示不正常，请问怎么解决。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>  <div id="scrollable"
       style="overflow:scroll;float:left;width:100px;height:100px;border:solid 1px red;">
    1dqwdqwdqwdqwd
        2qwdqwdqwdqwdqd
        3qwdqwdqwdqwdqwd
        4qwdqwdqwdqwdqwd
        5qwdqwdqwdqwd
  </div>
 
  <script type="text/javascript">
    $(document).ready(function() {
          setInterval(function() {
                $('#scrollable').fadeOut(500).delay(100).fadeIn(500);
          }, 1500);
        })
  </script>
</body>
</html>