Tu cria um JavaScript assim:
function updateScroll() {
var element = document.getElementById("teste");
element.scrollTop = element.scrollHeight;
}
updateScroll();
var timerId = window.setInterval(1, 1000);
setTimeout(function () {
clearInterval(timerId)
}, 10000);
No CSS não é preciso alterar nada, mas pode usar o seguinte para esconder a barra (porém ela continuará funcionando)
ul::-webkit-scrollbar{
display: none;
}
É só colocar um id na ul e colocar o nome dessa id no Javascript no lugar de teste.
Link JSFiddle
function updateScroll() {
var element = document.getElementById("teste");
element.scrollTop = element.scrollHeight;
}
updateScroll();
var timerId = window.setInterval(1, 1000);
setTimeout(function () {
clearInterval(timerId)
}, 10000);
ul {
list-style: none;
max-height:380px;
width:500px;
overflow-y:auto;
padding:5px;
background-color:#ccc;
position: absolute;
bottom:0;
}
ul>li {
height:80px;
margin-bottom:5px;
width:100%;
background-color:#888;
}
ul::-webkit-scrollbar{
display: none;
}
<ul id="teste">
<li>111111111111</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>222222sasa222222</li>
<li>222222222222</li>
<li>222222222222</li>
<li>22asa</li>
<li>222222sasa222222</li>
<li>222222sasa222222</li>
<li>222222sasa222222</li>
<li>222222sasa222222</li>
<li>222222sasa222222</li>
<li>FINAL</li>
</ul>
<li>222222222222</li>
apareça acima de<li>111111111111</li>
?