Bom dia!
Estou com a seguinte dúvida, preciso que a barra desça até o fim da página como um sistema de monitoração, preciso que ao chegar ao fim a mesma volte ao topo e dê um refresh. Eu consigo isso usando javascript?
Agradecimentos antecipados.
Com JavaScript, podes detetar quando a rolagem de determinado elemento chegou ao fim e nessa altura forçar a rolagem para o topo e disparar o carregamento da página atual, fazendo uso da propriedade onscroll
do elemento em questão e depois utilizar:
scrollTop
para enviar para a posição de rolagem pretendida;location.reload()
para recarregar a página atual.// apanhar o elemento a monitorizar pelo seu ID
var myDiv = document.getElementById("myDiv");
// Utilizar a propriedade "onscroll" para executar o código
myDiv.onscroll = function() {
// Detetar se estamos no fim
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
// Enviar para o topo
myDiv.scrollTop = 0;
// Recarregar página atual
location.reload();
}
};
Exemplo também disponível no JSFiddle.
var myDiv = document.getElementById("myDiv");
myDiv.onscroll = function() {
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
myDiv.scrollTop = 0;
location.reload();
}
};
html, body {
width:100%;
height:100%;
overflow:hidden;
}
div {
height:300px;
width:50%;
overflow:scroll;
}
<div id="myDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ante nec ipsum condimentum mollis. Sed ullamcorper gravida sapien, ac bibendum nunc bibendum non. Nunc pellentesque molestie ipsum, a volutpat dui finibus sed. Aliquam maximus quis justo tempor dictum. In hac habitasse platea dictumst. Integer at viverra ligula. Suspendisse rhoncus pellentesque pharetra. Pellentesque consequat justo lectus, et tempor mauris euismod vel. Sed facilisis urna nec enim finibus feugiat. Nam cursus in lorem non molestie. Quisque egestas interdum facilisis. Donec ultrices vel est et pharetra.
Vivamus faucibus non turpis non molestie. Pellentesque dictum libero et lectus porta, eu aliquet elit lacinia. Cras ac volutpat mi. Phasellus mollis in tellus at bibendum. Suspendisse lobortis lacinia nisl, ac gravida risus maximus in. Nunc sodales aliquam porta. Praesent tempor ex vel faucibus finibus. Vestibulum libero felis, vulputate fringilla velit in, pulvinar tincidunt mauris. Nam convallis est aliquam efficitur maximus.
Donec iaculis urna eu massa suscipit, a volutpat justo iaculis. Fusce dictum turpis tellus, at tristique orci hendrerit ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In facilisis sagittis justo sit amet egestas. Suspendisse sed gravida nisl. Pellentesque ipsum dolor, convallis ut gravida in, eleifend a dolor. Morbi eget ullamcorper enim. Phasellus elementum eleifend nunc, eu varius justo condimentum ut. Sed luctus velit felis, congue gravida ligula iaculis ac. Praesent auctor ipsum in quam sodales sollicitudin.
Vestibulum at ligula a nibh feugiat malesuada sit amet non massa. Nam viverra mi id enim laoreet dapibus. Sed feugiat efficitur elementum. Morbi convallis arcu ipsum, et molestie eros dapibus eget. Duis malesuada justo a odio blandit blandit. Aenean commodo egestas viverra. Sed luctus, augue eu gravida luctus, nisi eros eleifend urna, ac ultricies nisl odio sit amet metus. Vestibulum tincidunt urna ac hendrerit facilisis. Curabitur aliquet commodo dolor a tempus.
Vestibulum efficitur elit ultrices justo feugiat fermentum. Etiam iaculis ipsum nisi, ullamcorper ornare est venenatis a. Proin sed semper eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lacinia dignissim enim, a lacinia justo faucibus sed. Mauris luctus in lacus sit amet rutrum. Pellentesque vitae tellus sit amet elit aliquam gravida. Proin ut efficitur nibh. Aenean eu elit lacus. Praesent lectus neque, pulvinar vel magna vitae, ornare malesuada eros. Proin posuere dui nec risus bibendum, in accumsan neque venenatis. Morbi nunc lectus, elementum in augue id, placerat dapibus lacus. </div>
Mediante o solicitado, segue exemplo de como fazer rolagem no elemento de forma contínua até ao fim do mesmo, indo depois para o topo e forçando carregamento da página:
Exemplo também disponível no JSFiddle.
function scrollDiv() {
function scrollMe() {
myDiv.scrollTop = i;
if (status == 0) {
i = i + 1; // número pixeis a deslocar
if (i >= Height) {
status = 1;
}
}
setTimeout(scrollMe, 50); // velocidade da chamada
}
scrollMe();
}
var myDiv = document.getElementById("myDiv"),
Height = myDiv.scrollHeight,
i = 1,
j = Height,
status = 0;
scrollDiv();
myDiv.onscroll = function () {
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
myDiv.scrollTop = 0;
//location.reload(); Desligado para não entrar num loop infinito na demonstração
}
};
html, body {
width:100%;
height:100%;
overflow:hidden;
}
#myDiv {
height:300px;
width:50%;
overflow:scroll;
}
<div id="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ante nec ipsum condimentum mollis. Sed ullamcorper gravida sapien, ac bibendum nunc bibendum non. Nunc pellentesque molestie ipsum, a volutpat dui finibus sed. Aliquam maximus quis justo tempor dictum. In hac habitasse platea dictumst. Integer at viverra ligula. Suspendisse rhoncus pellentesque pharetra. Pellentesque consequat justo lectus, et tempor mauris euismod vel. Sed facilisis urna nec enim finibus feugiat. Nam cursus in lorem non molestie. Quisque egestas interdum facilisis. Donec ultrices vel est et pharetra. Vivamus faucibus non turpis non molestie. Pellentesque dictum libero et lectus porta, eu aliquet elit lacinia. Cras ac volutpat mi. Phasellus mollis in tellus at bibendum. Suspendisse lobortis lacinia nisl, ac gravida risus maximus in. Nunc sodales aliquam porta. Praesent tempor ex vel faucibus finibus. Vestibulum libero felis, vulputate fringilla velit in, pulvinar tincidunt mauris. Nam convallis est aliquam efficitur maximus. Donec iaculis urna eu massa suscipit, a volutpat justo iaculis. Fusce dictum turpis tellus, at tristique orci hendrerit ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In facilisis sagittis justo sit amet egestas. Suspendisse sed gravida nisl. Pellentesque ipsum dolor, convallis ut gravida in, eleifend a dolor. Morbi eget ullamcorper enim. Phasellus elementum eleifend nunc, eu varius justo condimentum ut. Sed luctus velit felis, congue gravida ligula iaculis ac. Praesent auctor ipsum in quam sodales sollicitudin. Vestibulum at ligula a nibh feugiat malesuada sit amet non massa. Nam viverra mi id enim laoreet dapibus. Sed feugiat efficitur elementum. Morbi convallis arcu ipsum, et molestie eros dapibus eget. Duis malesuada justo a odio blandit blandit. Aenean commodo egestas viverra. Sed luctus, augue eu gravida luctus, nisi eros eleifend urna, ac ultricies nisl odio sit amet metus. Vestibulum tincidunt urna ac hendrerit facilisis. Curabitur aliquet commodo dolor a tempus. Vestibulum efficitur elit ultrices justo feugiat fermentum. Etiam iaculis ipsum nisi, ullamcorper ornare est venenatis a. Proin sed semper eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lacinia dignissim enim, a lacinia justo faucibus sed. Mauris luctus in lacus sit amet rutrum. Pellentesque vitae tellus sit amet elit aliquam gravida. Proin ut efficitur nibh. Aenean eu elit lacus. Praesent lectus neque, pulvinar vel magna vitae, ornare malesuada eros. Proin posuere dui nec risus bibendum, in accumsan neque venenatis. Morbi nunc lectus, elementum in augue id, placerat dapibus lacus.</div>
Podes "brincar" um pouco com o código para atingires o teu objetivo, onde para o efeito deverás aumentar o número de pixeis a deslocar ou reduzir o tempo de espera entre chamadas da função que faz o rolagem.
Com a combinação de ambos podes obter uma rolagem mais rápida, menos rápida, mais suave, menos suave.
Especial atenção para as linhas comentadas do exemplo em cima presentado.