<html>
<head>
<title>scroll up auto smooth</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#scroll_outer{
width: 300px;
height: 90px;
margin: 30px auto;
overflow: hidden;
background-color: #f4f4f4;
}
#scroll_inner{
width: 100%;
}
.scroll_inner ul li{
height: 29px;
line-height: 29px;
border-bottom: 1px solid #d4d4d4;
}
</style>
</head>
<body>
<div id="scroll_outer">
<div class="scroll_inner">
<ul>
<li>this is news list items up 1</li>
<li>this is news list items up 2</li>
<li>this is news list items up 3</li>
<li>this is news list items up 4</li>
<li>this is news list items up 5</li>
<li>this is news list items up 6</li>
</ul>
</div>
</div>
<script>
window.onload = function(){
var scrollOuter = document.getElementById("scroll_outer"); //get scroll_outer object
var innerElement = scrollOuter.innerHTML; //get scroll_outer innerHTML
scroll_outer.innerHTML = innerElement + innerElement; //rewrite scroll_outer innerHTML to be deboule elements
var scrollInner = document.getElementsByClassName("scroll_inner")[0]; //get scroll_inner object
setInterval(scrollUp,50);
function scrollUp(){
if(scrollInner.offsetHeight == scrollOuter.scrollTop){
scrollOuter.scrollTop = 0;
}
scrollOuter.scrollTop += 1;
}
}
</script>
</body>
</html>
